Importing a react component into rescript

,
1

I have a simple react button (.tsx) component I want to use in my rescript component.

This is my rescript component

@module("../components/button/Button") external mybutton: string = "default"

@react.component
let make = () => {
  <div> <mybutton>{React.string("hello")}</mybutton> </div>
}

The resript build works but <mybutton> gets rendered as a html element named mybutton.

If I update the mybutton var to be Button I get the following error

@module("../components/button/Button") external Button: string = "default"

Did you forget a : here? It signals the start of a type Where here is the equal sign after string.

I tried doing things like

@module("../components/button/Button") external Button: string = "default"

let Button = mybutton

Also did not work.

I am clearly very new to rescript just trying to see if it is something we can start integrating in our application. Thank you!

1 Like
2

Can you try this? Here is the playground

module Mybutton = {
  @react.component @module("../components/button/Button")
  external make: (~children: React.element) => React.element = "default"
}


@react.component
let make = () => {
  <div> <Mybutton> {React.string("hello")} </Mybutton> </div>
}

A react component in rescript would be a module with a make function (and @react.component)

A module can be created in two ways

  1. With a new file. Every file is a module. You can create a new file Mybutton.res and add the following code
    @react.component @module("../components/button/Button")
external make: (~children: React.element) => React.element = "default"
  2. The second option would be to create a module inside a file as done in the playground.
1 Like
3

@a-c-sreedhar-reddy Thank you! This is exactly what I was looking for. When making a .res file for the button is there any specific import I need to do to use in in other rescript components.

EDIT: saw the module open doc. Thank you for your help!

4

@threeaccents No. you do not have to import/open anything to use the component in other components.

eg:

---Name.res File---
@react.component
let make = ()=>React.string("name")

Now if you want to use this Name component in other components then you can use it directly

---Details.res---
@react.component
let make = () => <Name/>

Docs: Import & Export | ReScript Language Manual

1 Like
5

How do I convert this code into a rescript?

import { Dropdown } from "module";

<Dropdown label="Dropdown button">
  <Dropdown.Item>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item>
    Settings
  </Dropdown.Item>
  <Dropdown.Item>
    Earnings
  </Dropdown.Item>
  <Dropdown.Item>
    Sign out
  </Dropdown.Item>
</Dropdown>
6

You can make an embed this way

module Navbar = {
  @module("module") @react.component
  external make: (
    ~children: React.element,
    ~fluid: bool,
    ~rounded: bool,
  ) => React.element = "Navbar"

  module Brand = {
    @scope("Navbar") @module("module") @react.component
    external make: (~children: React.element) => React.element = "Brand"
  }
}

let app = {
  <Navbar fluid=true rounded=true>
    <Navbar.Brand> React.null </Navbar.Brand>
  </Navbar>
}

Thanks @An-Tu