this package is a group of various hooks for reason-react that you may want to use.
npm install reason-react-hooks --save
yarn add reason-react-hooks
Then add the dependency to you bsconfig.json
"bs-dependencies": [
"reason-react-hooks"
],
All the hooks are located under ReasonReactHooks.Hooks
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.
[@react.component]
let make = () => {
let (ref, isVisible) = ReasonReactHooks.Hooks.useVisible();
<div ref>
{
isVisible ? "Hello !" : "I'm hidden";
}
->ReasonReact.string
</div>;
};
This hook allow you to know when an element is hovered.
[@react.component]
let make = () => {
let (ref, isHover) = ReasonReactHooks.Hooks.useHover();
<div ref>
{
isHover ? "You're on me !" : "You're not on me !";
}
->ReasonReact.string
</div>;
};
This hook allow you to do same that with classes and trigger a callback once the component is mounted
[@react.component]
let make = () => {
ReasonReactHooks.Hooks.useDidMount(~cb=() => Js.log("Component mounted"));
<div> "Hello world"->ReasonReact.string </div>;
};
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...
[@react.component]
let make = () => {
let (_, setValue) = React.useState(_ => "");
let debouncedFunction =
ReasonReactHooks.Hooks.useDebounce(
~cb=
value => {
setValue(_ => value);
Js.log(value);
},
~delay=500,
(),
);
<div>
<input
type_="text"
onChange={e => {
let value = ReactEvent.Form.target(e)##value;
debouncedFunction(value);
}}
/>
</div>;
};
This hook allow you to get the window height and width. It handle the window resize
[@react.component]
let make = () => {
let windowSize = ReasonReactHooks.Hooks.useWindowSize();
let height = windowSize.height;
let width = windowSize.width;
<div>
{j| The window is currently $width x $height|j}->ReasonReact.string
</div>;
};
This hook allow you to get the x and y of the mouse.
[@react.component]
let make = () => {
let mousePosition = ReasonReactHooks.Hooks.useMousePosition();
let y = mousePosition.y;
let x = mousePosition.x;
<div>
{j| The window is currently $x x $y|j}->ReasonReact.string
</div>;
};