Some hooks in ReasonML for reason-react that can be useful.
npm install reason-react-hooksthis package is a group of various hooks for reason-react that you may want to use.
``bash`
npm install reason-react-hooks --save
`bash`
yarn add reason-react-hooks
Then add the dependency to you bsconfig.json
`json`
"bs-dependencies": [
"reason-react-hooks"
],
All the hooks are located under ReasonReactHooks.Hooks
:rotating_light: Don't use any other module, for now bucklescript private module system isn't working but when it will, only ReasonReactHooks.Hooks will be expose.
This hook allow you to detect when an element appear on the screen.
It will trigger every time the element enter the window, which mean if the element is visible, then not, and visible again, the callback will trigger 2 times.
`reason
[@react.component]
let make = () => {
let (ref, isVisible) = ReasonReactHooks.Hooks.useVisible();
$3
This hook allow you to know when an element is hovered.
`reason
[@react.component]
let make = () => {
let (ref, isHover) = ReasonReactHooks.Hooks.useHover();
{
isHover ? "You're on me !" : "You're not on me !";
}
->ReasonReact.string
;
};
`$3
This hook allow you to do same that with classes and trigger a callback once the component is mounted
`reason
[@react.component]
let make = () => {
ReasonReactHooks.Hooks.useDidMount(~cb=() => Js.log("Component mounted"));
"Hello world"->ReasonReact.string ;
};
`$3
This hook allow you to debounce a function. It's pretty useful to deal with input and for performances
You can only pass 1 parameter to you callback. If you need more that 1 parameter, consider using an array, a record, a dict...
`reason
[@react.component]
let make = () => {
let (_, setValue) = React.useState(_ => "");
let debouncedFunction =
ReasonReactHooks.Hooks.useDebounce(
~cb=
value => {
setValue(_ => value);
Js.log(value);
},
~delay=500,
(),
);
type_="text"
onChange={e => {
let value = ReactEvent.Form.target(e)##value;
debouncedFunction(value);
}}
/>
;
};
`$3
This hook allow you to get the window height and width.
It handle the window resize
`reason
[@react.component]
let make = () => {
let windowSize = ReasonReactHooks.Hooks.useWindowSize();
let height = windowSize.height;
let width = windowSize.width;
{j| The window is currently $width x $height|j}->ReasonReact.string
;
};
`$3
This hook allow you to get the x and y of the mouse.
`reason
[@react.component]
let make = () => {
let mousePosition = ReasonReactHooks.Hooks.useMousePosition();
let y = mousePosition.y;
let x = mousePosition.x;
{j| The window is currently $x x $y|j}->ReasonReact.string
;
};
``