responsive-resizer.ts

import { RefObject, useState, useEffect } from "react";

type DimensionsTuple = [number, number]; // width, height

export function useResponsiveDimensions(
  ref: RefObject<HTMLDivElement>
): DimensionsTuple {
  const [dimensions, setDimensions] = useState<DimensionsTuple>([500, 300]);

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

    const element = ref.current;

    const updateDimensions = () => {
      const { width, height } = element.getBoundingClientRect();
      setDimensions([width, height]);
    };

    updateDimensions();

    const observer = new ResizeObserver(updateDimensions);
    observer.observe(element);

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

  return dimensions;
}

tbu w/ https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node