bloodyowl / Rescript Recoil
Licence: mit
Zero-cost bindings to Facebook's Recoil library
Stars: ✭ 115
Programming Languages
bucklescript
41 projects
Projects that are alternatives of or similar to Rescript Recoil
Introduce Reason Example
An example app made with Create React App which introduces a Reason component
Stars: ✭ 82 (-28.7%)
Mutual labels: reason-react, reasonml
React Recomponent
🥫 Reason-style reducer components for React using ES6 classes.
Stars: ✭ 272 (+136.52%)
Mutual labels: reason-react, reasonml
Timerlab
⏰ A simple and customizable timer
Stars: ✭ 84 (-26.96%)
Mutual labels: reason-react, reasonml
Verified React
Automated reasoning for React/ReasonML
Stars: ✭ 104 (-9.57%)
Mutual labels: reason-react, reasonml
rescript-react-compat
An alternative upgrade path for ReasonReact
Stars: ✭ 17 (-85.22%)
Mutual labels: reasonml, reason-react
Rescript React Update
useReducer with updates and side effects!
Stars: ✭ 79 (-31.3%)
Mutual labels: reason-react, reasonml
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 (-88.7%)
Mutual labels: reasonml, reason-react
Cra Template Rescript Lukin
🐪 Lukin CRA and ReScript Template
Stars: ✭ 18 (-84.35%)
Mutual labels: reason-react, reasonml
Rescript React Native
ReScript bindings for React Native
Stars: ✭ 802 (+597.39%)
Mutual labels: reason-react, reasonml
credt
CRDT-like data structures for building distributed, offline-first applications
Stars: ✭ 32 (-72.17%)
Mutual labels: reasonml, reason-react
Recontainers
[DEPRECATED] ReasonReact utilitary high order components
Stars: ✭ 54 (-53.04%)
Mutual labels: reason-react, reasonml
bs-react-is-visible
A small library that lets you know whether a component is visible on screen or not.
Stars: ✭ 15 (-86.96%)
Mutual labels: reasonml, reason-react
bs-react-native-vector-icons
ReasonML bindings for react-native-vector-icons
Stars: ✭ 16 (-86.09%)
Mutual labels: reasonml, reason-react
react-multiversal
React components that works everywhere (iOS, Android, Web, Node)
Stars: ✭ 43 (-62.61%)
Mutual labels: reasonml, reason-react
timerlab
⏰ A simple and customizable timer
Stars: ✭ 94 (-18.26%)
Mutual labels: reasonml, reason-react
reason-rt-binding-generator
Reason binding generator for react-toolbox
Stars: ✭ 18 (-84.35%)
Mutual labels: reasonml, reason-react
Reason React Hacker News
hacker news mobile app made with reason react
Stars: ✭ 591 (+413.91%)
Mutual labels: reason-react, reasonml
Pragma
Pragma is a self-hosted, open-source, personal note taking app.
Stars: ✭ 39 (-66.09%)
Mutual labels: reason-react, reasonml
rescript-recoil
Zero-cost bindings to Facebook's Recoil library
⚠️ These bindings are still in experimental stages, use with caution
Installation
Run the following command:
$ yarn add recoil rescript-recoil
Then add rescript-recoil
to your bsconfig.json
's dependencies:
{
"bs-dependencies": [
+ "rescript-recoil"
]
}
Usage
Atom
let textState = Recoil.atom({
key: "textState",
default: "",
})
Selector
A nice feature the OCaml type-system enables is the ability to differenciate Recoil values between the ones that can only read state with the ones that can write state. This way, you can't use hooks with write capabilities with a read-only value.
With read only capabilities
let textStateSize = Recoil.selector({
key: "textStateSize",
get: ({get}) => {
let textState = get(textState)
Js.String.length(textState)
},
})
With write capabilities
let textStateSize = Recoil.selectorWithWrite({
key: "textStateSize",
get: ({get}) => {
let textState = get(textState);
Js.String.length(textState);
},
set: ({set}, newSize) => {
let currentTextState = get(textState);
set(textState, currentTextState->Js.String.slice(~from=0, ~to_=newSize));
}
});
Async
let user = Recoil.asyncSelector({
key: "user",
get: ({get}) => {
fetchUser(get(currentUserId))
},
})
Hooks
useRecoilState
let (state, setState) = Recoil.useRecoilState(textState);
state // read
setState(textState => newTextState) // write
useRecoilValue
let state = Recoil.useRecoilValue(textState)
state // read
useSetRecoilState
let setState = Recoil.useSetRecoilState(textState)
setState(textState => newTextState) // write
useResetRecoilState
let reset = Recoil.useResetRecoilState(textState)
reset() // write
useRecoilCallback
- Dependency free (reevaluates the callback at every render):
useRecoilCallback(...)
- Zero-dependency (never reevaluates the callback):
useRecoilCallback0(...)
- One-dependency (reevaluates when dep changes):
useRecoilCallback1(..., [|dep|])
- Multiple-dependencies:
useRecoilCallback2(..., (dep1, dep2))
(goes from 2 to 5)
let onClick = Recoil.useRecoilCallback(({snapshot: {getPromise}}, event) => {
let _ = getPromise(myAtom)
|> Js.Promise.then_(value => {
Js.log(value)
Js.Promise.resolve()
})
})
<button onClick={onClick}>
{"Click me"->React.string}
</button>
useRecoilValueLoadable
let loadable = Recoil.useRecoilValueLoadable(textState)
Js.log(loadable->Recoil.Loadable.state)
Js.log(loadable->Recoil.Loadable.getValue)
Examples
The Recoil Basic Tutorial has been made in ReasonReact: check the source!
You can run it using:
$ yarn examples
and going to http://localhost:8000/TodoList.html
Memoization
type t = {
id: string,
value: string,
isCompleted: bool,
}
// For atoms
let todoItemFamily = Recoil.atomFamily({
key: "todo",
default: param => {
id: param,
value: "",
isCompleted: false,
},
})
// For selectors
let todoItemLengthFamily = Recoil.selectorFamily({
key: "todo",
// The `Fn` wrapper is needed here so that BuckleScript
// outputs the correct value
get: param => Fn(({get}) => {
get(todoItemFamily(param)).value->Js.String2.length
}),
})
And use it within a React component:
[@react.component]
let make = (~todoId) => {
let (todo, setTodo) = Recoil.useRecoilState(todoItemFamily(id))
// ...
<>
{todo.value->React.string}
</>
}
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].