How to use a JavaScript Material Design library in ReScript?

Question

I am trying to use the material-ui library in a Rescript/React app. The code below will show a button:

@module("@material-ui/core/Button") external button: string = "default"

@react.component
let make = () => {
     <button > {React.string("Hello")} </button>
}

The button shown is basic and I cannot change basic properties like variant="contained" or color="primary" as they aren't recognised. I tried to change the string type, in the first line, to a type from the TypeScript @material-ui/core/Button file, but it didn't work. I tried to use %%raw() and %raw(), but they are very limited. I could not work with the objects they returned as ReScript doesn't know their types. Also, I could not call React.useEffect() using %raw() (as it doesn't return anything) inside the make function.

In TypeScript, I can use objects and call functions without having type information about them.

Is there a way to do the same thing in ReScript or do I have to add all the typing information myself (if I want to use a library)?

Answer 1

You cannot directly use a library like we do in typescript. Rescript has a very strong type system and does not have any type.

You can use this library https://www.npmjs.com/package/@jsiebern/bs-material-ui for Rescript material ui bindings. You can check for bindings or rescript libraries here. Only if there is no bindings available already, you may have to write it.

Answer 2

The binding signature is incorrect. Try this:

module Button = {
  @module("@material-ui/core/Button") @react.component
  external make: (~variant=option<[ | #outline | #contained ]>=?, ~children) => React.element = "default"
}


@react.component
let make = () => {
     <Button variant=#outline> {React.string("Hello")} </Button>
}

Answer 3

Here you can find bindings for material-ui. Here you can find github repo

rescript-material-ui provides ReScript bindings for the Javascript based UI library MUI (formerly MaterialUi).

The bindings are automatically generated by utilizing the documentation generation scripts of the original package. These rely on a mix of code & code annotations and are not always 100% accurate.

This will directly translate into the bindings. If you come across a missing prop on a component or a misbehaving component, please feel free to open an issue.