Function useMeasure

package/example/src/hooks/useMeasure.ts:9–35

()

/** Measures the width/height of an element using ResizeObserver. */
export const useMeasure = <T extends HTMLElement>(): [
  React.RefObject<T>,
  Bounds,
] => {
  const ref = React.useRef<T>(null);
  const [bounds, setBounds] = React.useState<Bounds>({
    width: undefined,
    height: undefined,
  });

  React.useLayoutEffect(() => {
    if (!ref.current) return;

    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      setBounds({
        width: entry.contentRect.width,
        height: entry.contentRect.height,
      });
    });
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, []);

  return [ref, bounds];
};