javascriptreactjsmaterial-uireasonrescript

How to use a JavaScript Material Design library in ReScript?


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)?


Solution

  • 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.