Escaping the word type

, ,
1

Hello,

I’m trying to write some bindings for ReactMapGL and they use the word type a lot in props or properties of props.

Example:

  type sourceData = {
    \"type": string, // Is this correct?
    geometry: sourceDataGeometry,
  }

  module Source = {
    @module("react-map-gl") @react.component
    external make: (
      ~id: string,
      ~\"type\": string, // Is this correct?
      ~data: sourceData,
      ~children: React.element,
    ) => React.element = "Source"
  }

And how to use this in JSX:

<ReactMapGL.Source id="tenMilesTrail" type="geojson" data={tenMilesData}>

I’m a little confused about what to do in these three cases.
Any pointer would be much appreciated.

2

It’ll probably be more ergonomic to use the @as annotation instead, which would let you use whatever name you wanted within rescript, e.g.:

type sourceData = {
  @as("type")
  type_: string,
  geometry: sourceDataGeometry,
}

module Source = {
  @module("react-map-gl") @react.component
  external make: (
    ~id: string,
    @as("type")
    ~type_: string,
    ~data: sourceData,
    ~children: React.element,
  ) => React.element = "Source"
}

<ReactMapGL.Source id="tenMilesTrail" type_="geojson" data={tenMilesData}>
4 Likes
3

Thanks, how can I use this trick for the standard element?

4

Do you mean for example type=“button” for buttons?

Just pass type_="button" as prop. It will be converted automatically.

1 Like