🪴 Zero's Garden

JS Interop

1 min read

Binding to an external React component

module SupervisedUserCircleOutlined = {
  @react.component @module("@mui/icons-material/SupervisedUserCircle")
  external make: unit => React.element = "default"
}
 
@react.component
let make = () => {
  <SupervisedUserCircleOutlined color={Mui.Colors.red.c400} fontSize="26px" />
}

@as decorator

@as is used to map to JavaScript attribute names that cannot be expressed in ReScript (such as keywords).

For example, in JsxDOM.domProps

@as("type")
type_?: string /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */,

and in @react.component

module Comp = {
  @react.component
  let make =
    (@as("open") ~_open, @as("type") ~_type) =>
      <Modal _open _type>
        <Description />
      </Modal>
}

References

Graph View