Custom Hooks

useWindowResize.re

type windowSize = {
  height: int,
  width: int,
};

let useWindowResize = () => {
  let getWindowSize = (): option(windowSize) =>
    switch ([%external window]) {
    | None => None
    | Some(w) =>
      Some({width: Window.innerWidth(w), height: Window.innerHeight(w)})
    };

  let (windowSize, setWindowSize) = React.useState(getWindowSize);

  React.useEffect1(
    () => {
      let handleResize = _ => {
        setWindowSize(_ => getWindowSize());
      };
      switch ([%external window]) {
      | None => None
      | Some(w) =>
        Window.addEventListener("resize", handleResize, w);

        Some(() => Window.removeEventListener("resize", handleResize, w));
      };
    },
    [||],
  );
  windowSize;
};