https://github.com/Astrocoders/recontainers
[DEPRECATED] ReasonReact utilitary high order components
https://github.com/Astrocoders/recontainers
react reason-react reasonml
Last synced: 10 months ago
JSON representation
[DEPRECATED] ReasonReact utilitary high order components
- Host: GitHub
- URL: https://github.com/Astrocoders/recontainers
- Owner: Astrocoders
- License: mit
- Archived: true
- Created: 2018-07-19T16:16:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-16T21:03:46.000Z (over 5 years ago)
- Last Synced: 2025-03-05T02:02:04.005Z (12 months ago)
- Topics: react, reason-react, reasonml
- Language: Reason
- Homepage:
- Size: 332 KB
- Stars: 54
- Watchers: 7
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - recontainers
README
# [We strongly suggest for you to use hooks now](https://reasonml.github.io/reason-react/docs/en/components)
# ReContainers
[](https://travis-ci.org/Astrocoders/ReContainers)
Type safe high order components for ReasonReact
```
$ yarn add re-containers
```
## Inspired by
Inspired by [recompose](https://github.com/acdlite/recompose/), [react-powerplug](https://github.com/renatorib/react-powerplug) and [smalldots](https://github.com/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 => ...c ;
let%Epitath mutate = c => ...c ;
myState.send(foo)
```
[We recommend you reading this article to get started](https://medium.com/astrocoders/render-props-composition-for-reasonml-is-here-b9c004ca9fcb)
## WithState
```ocaml
module WithState = ReContainers.WithState.Make({
type state = int;
});
...(({ state, send }) => {
ReasonReact.string("Count is " ++ string_of_int(state))
send(Set(state + 1)))>(ReasonReact.string("+"))
send(Set(state - 1)))>(ReasonReact.string("+"))
})
```
## 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))
load(makeTimeout()))>
(ReasonReact.string("Click me"))
(
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
)
))
```