@fattafatta/rescript-react-lazy

rescript-react-lazy

Minimal bindings to use React.lazy with ReScript.

Installation

Install with npm:

npm install @fattafatta/rescript-react-lazy

Or install with yarn:

yarn add @fattafatta/rescript-react-lazy

Add @fattafatta/rescript-react-lazy as a dependency to your bsconfig.json:

"bs-dependencies": ["@rescript/react", "@fattafatta/rescript-react-lazy"]

Usage

Check out the example folder for a fully working example.

Components without props

First create a Component to import in a separate file (e.g. Component.res).

This will lazy-load the component:

module App = {
  @react.component
  let make = () => {
    let module(Comp) = ReactLazy.NoProps.make(() => ReactLazy.import_("./Component.bs"))
    <Comp /> 
  }
}

Component with props

First create a Component with props to import in a separate file (e.g. Component.res). We use a Functor to set the type of the imported component.

// define type
module C = {
  module type T = module type of Component
}

// create Functor
module Laz = ReactLazy.MakeLazy(C)

// lazy-load component
module Comp = unpack(Laz.make(() => ReactLazy.import_("./Component.bs"), Component.makeProps))

module App = {
  @react.component
  let make = () => {
    <Comp text="Hello World!" /> 
  }
}

Notes

The code generated with these bindings is not completely type safe. It is easily possible to set the wrong type of a component, by for example creating a Functor with Component1.res but importing ./Component2.bs. There is no way for the compiler to warn about this. So always make sure to import the right component.

There is an open discussion about dynamic imports on the ReScript forum that might solve this: Discussion.