Import / Export ReactJS

Reusing existing React components in ReScript is straightforward. This guide will walk you through the steps required to import and use React components within ReScript, including defining component props and handling various import scenarios.

Basic Example

To reuse a React component in ReScript, create a new module, specify the component's location, and define its props.

ReScriptJS OutputJSX Preserved Output

module Confetti = {
  @module("react-confetti") @react.component
  external make: (~width: int, ~height: int) => React.element = "default"
}

// Assuming we are in App.res
@react.component
let make = () => {
  <Confetti width={300} height={300} />
}

Importing from Relative Paths

You can import components from relative file paths using the @module attribute.
Use "default" to indicate the default export, or specify a named export if needed.

Named Export Example

ReScriptJS Output

// Equivalent of import { Foo } from "bar"
module Foo = {
  @module("bar") @react.component
  external make: unit => React.element = "Foo"
}

Defining Props Types

You can define a separate type for your component's props within the module.

Props Type Example

ReScriptJS OutputJSX Preserved Output

module Confetti = {
  type confettiProps = {
    width: int,
    height: int,
  }

  @module("react-confetti") @react.component(: confettiProps)
  external make: confettiProps => React.element = "default"
}

@react.component
let make = () => {
  <Confetti width={300} height={300} />
}

Optional Props

To define optional props, use the ? symbol.

ReScriptJS OutputJSX Preserved Output

module Confetti = {
  type confettiProps = {
    width: int,
    height: int,
    initialVelocityX?: int,
    initialVelocityY?: int,
  }

  @module("react-confetti") @react.component(: confettiProps)
  external make: confettiProps => React.element = "default"
}

@react.component
let make = () => {
  <Confetti width={300} height={300} />
}

Extending Built-in DOM Nodes

To accept existing DOM props for a component, extend the JsxDOM.domProps type.

ReScriptJS OutputJSX Preserved Output

module Foo = {
  type fooProps = {
    ...JsxDOM.domProps,
    customProp: string,
  }

  @module("foo") @react.component(: fooProps)
  external make: fooProps => React.element = "default"
}

@react.component
let make = () => {
  <Foo width={"300px"} height={"300px"} customProp="bar" />
}

In this example width and height can be set because JsxDOM.domProps was spread into fooProps.