@spaced-out/ui-design-system/lib/hooks/useResizeObserver/useResizeObserver.js.flow

Sense UI components library

// @flow strict
import * as React from 'react';


export function useResizeObserver(): [React.Ref<'div'>, number] {
  const ref = React.useRef(null);
  const [height, setHeight] = React.useState(0);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) {
      return;
    }

    const resizeObserver = new ResizeObserver(([entry]) => {
      setHeight(entry.contentRect.height);
    });

    resizeObserver.observe(node);
    setHeight(node.getBoundingClientRect().height);

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

  return [ref, height];
}