https://github.com/jaredly/hooks-experimental
An experiment using react's new "hooks" with ReasonReact
https://github.com/jaredly/hooks-experimental
Last synced: about 1 year ago
JSON representation
An experiment using react's new "hooks" with ReasonReact
- Host: GitHub
- URL: https://github.com/jaredly/hooks-experimental
- Owner: jaredly
- Created: 2018-10-29T14:01:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-30T13:21:35.000Z (over 7 years ago)
- Last Synced: 2025-04-30T08:12:19.992Z (about 1 year ago)
- Language: OCaml
- Size: 229 KB
- Stars: 75
- Watchers: 6
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# hooks-experimental
An experiment using react's new "hooks" with ReasonReact
WARNING: Do not use for anything real.
## How to use
### 1) the package.json
NOTE: You *must* use yarn, so that we can override reason-react's react dependencies with `resolutions`.
```
"resolutions": {
"**/react": "16.7.0-alpha.0",
"**/react-dom": "16.7.0-alpha.0"
},
"dependencies": {
"react": "16.7.0-alpha.0",
"react-dom": "16.7.0-alpha.0",
"reason-react": "^0.5.3",
"hooks-experimental": "github:jaredly/hooks-experimental"
}
```
### 2) the bsconfig.json
Nothing special here, just add `"hooks-experimental"` to `"bs-dependencies"`.
### 3) making a component!
```re
module ReasonReact = Hooks.ReasonReact;
module FancyCounter = {
let component = (. props: {. "initialValue": int}) => {
let (count, setCount) = Hooks.useState(props##initialValue);
{ReasonReact.string(string_of_int(count))}
setCount(. count + 1)}>
{ReasonReact.string("Count Up To The Moon")}
;
};
component->Hooks.setName("Just");
let make = (~initialValue, _children) =>
Hooks.createElement(
~component,
~props={"initialValue": initialValue},
);
};
ReactDOMRe.renderToElementWithId(, "root");
```
### 4) Hooks API
```
[@bs.module "react"] external useState: 'a => ('a, (. 'a) => unit) = "";
[@bs.module "react"] external useEffect: ((unit) => (unit => unit)) => unit = "";
[@bs.module "react"]
external useMutationEffect: ((unit) => (unit => unit)) => unit = "";
[@bs.module "react"]
external useLayoutEffect: ((unit) => (unit => unit)) => unit = "";
[@bs.module "react"]
external useEffectWithoutCleanup: (unit => unit) => unit = "useEffect";
[@bs.module "react"]
external useMutationEffectWithoutCleanup: (unit => unit) => unit = "";
[@bs.module "react"]
external useLayoutEffectWithoutCleanup: (unit => unit) => unit = "";
[@bs.module "react"] external useCallback: (unit => 'a, 'b, unit) => 'a = "";
[@bs.module "react"] external useMemo: (unit => 'a, 'b) => 'a = "";
[@bs.module "react"] external useRef: 'a => {. "current": 'a} = "";
[@bs.module "react"]
external useDomRef: unit => {. "current": option(Dom.node)} = "useRef";
[@bs.module "react"]
external useReducer:
(~reducer: (. 'state, 'action) => 'state, ~initial: 'state) =>
('state, (. 'action) => unit) =
"";
```