Astrocoders / Recontainers
Licence: mit
[DEPRECATED] ReasonReact utilitary high order components
Stars: ✭ 54
Programming Languages
reason
219 projects
Projects that are alternatives of or similar to Recontainers
Pragma
Pragma is a self-hosted, open-source, personal note taking app.
Stars: ✭ 39 (-27.78%)
Mutual labels: reason-react, reasonml
credt
CRDT-like data structures for building distributed, offline-first applications
Stars: ✭ 32 (-40.74%)
Mutual labels: reasonml, reason-react
onetricks.net
(WIP) kayn-powered (typescript node.js) ReasonReact app presenting you a dashboard of high ELO one trick ponies in League of Legends
Stars: ✭ 13 (-75.93%)
Mutual labels: reasonml, reason-react
dokusho
Simple Japanese reading stats tracker
Stars: ✭ 12 (-77.78%)
Mutual labels: reasonml, reason-react
Cra Template Rescript Lukin
🐪 Lukin CRA and ReScript Template
Stars: ✭ 18 (-66.67%)
Mutual labels: reason-react, reasonml
timerlab
⏰ A simple and customizable timer
Stars: ✭ 94 (+74.07%)
Mutual labels: reasonml, reason-react
bs-react-is-visible
A small library that lets you know whether a component is visible on screen or not.
Stars: ✭ 15 (-72.22%)
Mutual labels: reasonml, reason-react
Reason-react-hooks
🧶 Some hooks in ReasonML for reason-react that can be useful
Stars: ✭ 14 (-74.07%)
Mutual labels: reasonml, reason-react
React Recomponent
🥫 Reason-style reducer components for React using ES6 classes.
Stars: ✭ 272 (+403.7%)
Mutual labels: reason-react, reasonml
bs-react-native-vector-icons
ReasonML bindings for react-native-vector-icons
Stars: ✭ 16 (-70.37%)
Mutual labels: reasonml, reason-react
Rescript React Native
ReScript bindings for React Native
Stars: ✭ 802 (+1385.19%)
Mutual labels: reason-react, reasonml
reason-rt-binding-generator
Reason binding generator for react-toolbox
Stars: ✭ 18 (-66.67%)
Mutual labels: reasonml, reason-react
reason-catstagram
🐈 Catstagram made with ReasonReact!
Stars: ✭ 31 (-42.59%)
Mutual labels: reasonml, reason-react
react-multiversal
React components that works everywhere (iOS, Android, Web, Node)
Stars: ✭ 43 (-20.37%)
Mutual labels: reasonml, reason-react
reason-react-lazy-loading
Example project to show how to use components lazy loading in ReasonReact
Stars: ✭ 41 (-24.07%)
Mutual labels: reasonml, reason-react
rescript-react-compat
An alternative upgrade path for ReasonReact
Stars: ✭ 17 (-68.52%)
Mutual labels: reasonml, reason-react
We 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.
let%Epitath myState = c => <WithState> ...c </WithState>;
let%Epitath mutate = c => <MutationContainer> ...c </MutationContainer>;
myState.send(foo)
We recommend you reading this article to get started
WithState
module WithState = ReContainers.WithState.Make({
type state = int;
});
<div>
<WithState initialState=0>
...(({ state, send }) => {
<div>
<p>ReasonReact.string("Count is " ++ string_of_int(state))</p>
<button onClick=((_) => send(Set(state + 1)))>(ReasonReact.string("+"))</button>
<button onClick=((_) => send(Set(state - 1)))>(ReasonReact.string("+"))</button>
</div>
})
</WithState>
</div>
Component
Nice for lifecycle helpers
<Component didMount willUnmount willUpdate>
...((self) => {
<div />
})
</Component>
Loader
Handling promises
module ReLoader = ReContainers.Loader.Make({
/* Promise result */
type t = int;
});
/* Could be a fetch for instance */
let makeTimeout = () =>
Js.Promise.make((~resolve, ~reject as _) =>
Js.Global.setTimeout(() => resolve(. 0), 2000) |> ignore
);
<ReLoader>
...(
({state, load}) =>
<div className="App">
<div className="App-header">
<img src=logo className="App-logo" alt="logo" />
<h2> (ReasonReact.string(message)) </h2>
<button onClick=(_e => load(makeTimeout()))>
(ReasonReact.string("Click me"))
</button>
</div>
(
switch (state) {
| Loading =>
<p> (ReasonReact.string("Hang a sec")) </p>
| Error(string) => <p> (ReasonReact.string(string)) </p>
| Success(_promiseResult) => <p> (ReasonReact.string("All good")) </p>
| Empty => ReasonReact.null
}
)
</div>
)
</ReLoader>
ReList
It manages the state of lists for you
Make
module ReList = ReContainers.ReList.Make({
type t = { name: string, age: int };
});
Usage
<ReList initial=[{ name: "Dio Brando", age: 123 }]>
...(({ list, pull, push }) => (
<Wrapper>
<CharFormInput onSubmit=(({ values }) => push(values)) />
(
list
|> List.map(todo => (
<CharItem onDelete=pull(({ age, name }) => char.name == name && char.age == age)>
(ReasonReact.string(char.name))
</CharItem>
))
|> Array.of_list
|> ReasonReact.array
)
</Wrapper>
))
</ReList>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].