How to interopt with Chakra-Ui

,
1

Hello everyone,

I’m brand new to ReScript, but am excited to start playing around with the language. I’ve created a sample app with the create-rescript-app template and am currently trying to interopt with chakra-ui/react library.

I’m trying to import a Button from the library. The button is functioning as expected, but the styles aren’t getting loaded. The button appears as text that is clickable when hovering over the element.

I feel like I’m definitely misconfiguring the chakra provider, but it could be the way i’m setting up imports

Below is my Main.res file, where I’m seting up the standard chakraProvider

%%raw("import './index.css'")

@module("@chakra-ui/react") external chakraProvider: (~children: React.element) => React.element = "ChakraProvider"

switch ReactDOM.querySelector("#root") {
  | Some(domElement) =>
    ReactDOM.Client.createRoot(domElement)->ReactDOM.Client.Root.render(
      <React.StrictMode>
          <chakraProvider>
            <App />
          </chakraProvider>
      </React.StrictMode>,
    )
  | None => ()
}

And in the App.res module I’m trying to import a Button from the library.

module Mybutton = {
  @react.component @module("@chakra-ui/react")
  external make: (~children: React.element, ~onClick: ReactEvent.Mouse.t => unit) => React.element = "Button"
}

@react.component
let make = () => {
  
  let (count, setCount) = React.useState(() => 23)

  <div className="p-6">     
    <Mybutton onClick={_ => Js.log("hello world")}> {"Click me" -> React.string} </Mybutton>
    <h1 className="text-3xl font-semibold"> {"What is this about?"->React.string} </h1>
    <p>
      {React.string("This is a simple template for a Vite project using ReScript & Tailwind CSS.")}
    </p>
    <h2 className="text-2xl font-semibold mt-5"> {React.string("Fast Refresh Test")} </h2>
    <Button onClick={_ => setCount(count => count + 1)}>
      {React.string(`count is ${count->Int.toString}`)}
    </Button>
    <p>
      {React.string("Edit ")}
      <code> {React.string("src/App.res")} </code>
      {React.string(" and save to test Fast Refresh")}
    </p>
  </div>
}
2

Don’t know exactly, but probably you have to bind it to a make function inside a ChakraProvider module.

React components have to be written with a capital letter at the beginning.

1 Like
3

@dkirchhof is correct, the binding should be

module ChakraProvider = {
  @react.component @module("@chakra-ui/react")
  external make: (~children: React.element) => React.element = "ChakraProvider"
}

Playground link

2 Likes