A utility hook for measuring an element's size

useElementSize.ts

import { useEffect, useState } from "react";

function useElementSize(ref: React.RefObject<HTMLElement>) {
  const [size, setSize] = useState<DOMRectReadOnly>(new DOMRectReadOnly());

  useEffect(() => {
    if (ref.current && !!window?.ResizeObserver) {
      const observer = new ResizeObserver(([entry]) => {
        setSize(entry.contentRect);
      });
      observer.observe(ref.current);

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

  return size;
}

export default useElementSize;