Reason-react-hooks

this package is a group of various hooks for reason-react that you may want to use.

How to install ?

npm install reason-react-hooks --save

yarn add reason-react-hooks

Then add the dependency to you bsconfig.json

"bs-dependencies": [
    "reason-react-hooks"
],

How to use it ?

What the package contains ?

All the hooks are located under ReasonReactHooks.Hooks

🚨 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.

Examples

useVisible

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>;
};

useHover

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>;
};

useDidMount

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>;
};

useDebounce

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>;
};

useWindowSize

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>;
};

useMousePosition

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>;
};