re-containers
v6.6.6
Utilitary containers for ReasonReact
0/weekUpdated 3 years agoMITUnpacked: 12.1 KB
Published by Astrocoders
npm install re-containersWe strongly suggest for you to use hooks now
ReContainers
Type safe high order components for ReasonReact
``
$ yarn add re-containers
Inspired by
Inspired by recompose, react-powerplug and smalldots
Containers
Available API
Recommended usage
Composing Render Props is not an easy tasks, that's why we created https://github.com/Astrocoders/bs-epitath to offer a easy syntax do compose your Render Props in an await-async manner.
`ocaml
let%Epitath myState = c =>
let%Epitath mutate = c =>
myState.send(foo)
`
We recommend you reading this article to get started
WithState
`ocaml
module WithState = ReContainers.WithState.Make({
type state = int;
});
...(({ state, send }) => {
ReasonReact.string("Count is " ++ string_of_int(state))
})
`
Component
Nice for lifecycle helpers
ocaml
...((self) => {
})
`Loader
Handling promises
ocaml
module ReLoader = ReContainers.Loader.Make({
/ Promise result /
type t = int;
});
`ocaml
/ Could be a fetch for instance /
let makeTimeout = () =>
Js.Promise.make((~resolve, ~reject as _) =>
Js.Global.setTimeout(() => resolve(. 0), 2000) |> ignore
);
...(
({state, load}) =>
(ReasonReact.string(message))
(
switch (state) {
| Loading =>
(ReasonReact.string("Hang a sec"))
| Error(string) => (ReasonReact.string(string))
| Success(_promiseResult) => (ReasonReact.string("All good"))
| Empty => ReasonReact.null
}
)
)
`ReList
It manages the state of lists for you
Make
ocaml
module ReList = ReContainers.ReList.Make({
type t = { name: string, age: int };
});
`Usage
ocaml
...(({ list, pull, push }) => (
push(values)) /> (
list
|> List.map(todo => (
char.name == name && char.age == age)>
(ReasonReact.string(char.name))
))
|> Array.of_list
|> ReasonReact.array
)
))
``