ReasonML/React Hooks Measuring DOM Node

_readme.md

Measure DOM Node

ReasonML translation of code from https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

MeasureChild.re

[@react.component]
let make = (~measureRef) => {
  let (show, setShow) = React.useState(_ => false);
  if (!show) {
    <button onClick={_ => setShow(_ => true)}>
      {ReasonReact.string("Show child")}
    </button>;
  } else {
    <h1 ref={ReactDOMRe.Ref.callbackDomRef(measureRef)}>
      {ReasonReact.string("Hello, world")}
    </h1>;
  };
};

MeasureMe.re

[@bs.send] external getBoundingClientRect: Dom.element => Js.t({..}) = "";

[@react.component]
let make = () => {
  let (height, setHeight) = React.useState(_ => 0.0);

  let measureRef =
    React.useCallback(nodeOption =>
      switch (Js.Nullable.toOption(nodeOption)) {
      | Some(node) => setHeight(getBoundingClientRect(node)##height)
      | None => ()
      }
    );

  <>
    <MeasureChild measureRef />
    {if (height > 0.0) {
       <h2>
         {ReasonReact.string(
            "The above header is "
            ++ Js.Float.toFixed(Js.Math.round(height))
            ++ "px tall",
          )}
       </h2>;
     } else {
       ReasonReact.null;
     }}
  </>;
};