Suspense/Lazy for ReasonReact
npm install reason-loadablesh
npm install reason-loadable --save
`
Then add "reason-loadable" in "bsconfig.json" :
`sh
"bs-dependencies": [
"reason-loadable"
]
`
You can now use "ReLoadable" module.
Note : "ReLoadable" contain type definition, it doesn't add any single bit into your project.
Support
* ReasonReact component (JSX v3). āļø
* Non-ReasonReact component (third-party React component or your own plain JavaScript React component). āļø
ReasonReact JSX v2 isn't supported : Please consider migrating to JSX v3 (new ReasonReact hook components).
Examples
1) Create a ReasonReact hook component (JSX v3).
`reason
/ HelloWorld.re /
[@react.component]
let make = (~name) => (React.string("Hello world " ++ name))
;
/ Export default is necessary because React lazy function always resolve the default export. /
let default = make;
`
2) Create type-safe lazy component with "ReLoadable.lazy_" and "ReLoadable.import".
`reason
/ LazyHelloWorld.re /
module type T = (module type of WithPure);
/*
Needed for BuckleScript to not import the original component :
See https://github.com/BuckleScript/bucklescript/issues/3543
*/
let unsafePlaceholder: module T = [%raw {|{}|}];
module UnsafePlaceholder = (val unsafePlaceholder);
let makeProps = UnsafePlaceholder.makeProps;
let make =
ReLoadable.lazy_(() => ReLoadable.import(UnsafePlaceholder.make, "./HelloWord.bs.js"));
`
3) Render lazy component anywhere in your ReasonReact app with "React.Suspense".
`reason
/ App.re /
[@react.component]
let make = () => {
(React.string("Loading ..."))
More example are available in repository.
Non-ReasonReact component
1) Create type-safe lazy component with "ReLoadable.lazy_" and "ReLoadable.import".
`reason
/ LazyButton.re /
/ You have to type non-ReasonReact component props explicitly. /
module type T = {
[@react.component]
let make: (~text: string) => React.element;
};
/*
Needed for BuckleScript to not import the original component :
See https://github.com/BuckleScript/bucklescript/issues/3543
*/
let unsafePlaceholder: module T = [%raw {|{}|}];
module UnsafePlaceholder = (val unsafePlaceholder);
let makeProps = UnsafePlaceholder.makeProps;
/ "@my-component-lib/button" should have a default export. /
let make =
ReLoadable.lazy_(() => ReLoadable.import(UnsafePlaceholder.make, "@my-component-lib/button"));
`
2) Render lazy component anywhere in your ReasonReact app with "React.Suspense".
`reason
/ App.re /
[@react.component]
let make = () => {
(React.string("Loading ..."))
API
#### ReLoadable.import: (Js.t('a) => React.element), string) => Js.Promise.t(Js.t('a) => React.element)
Dynamic import React component.
#### ReLoadable.lazy_: (unit => Js.Promise.t('a)) => 'a`