useResize.ts

import { useEffect, useRef } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

function useResize(ref: React.MutableRefObject<HTMLElement>, callback: (size: { width: number; height: number}) => void) {
  const resizeObserver = useRef(new ResizeObserver(entries => {
    if (!entries || !entries.length) return;
    const entry = entries[0];
    const { width, height } = entry.contentRect;
    callback({ width, height });
  }));

  useEffect(() => {
    const currentElement = ref.current;
    if (currentElement) {
      resizeObserver.current.observe(currentElement);
    }

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


function MyComponent() {
  const ref = useRef<HTMLElement>(null);
  useResize(ref, size => {
    // do something with the size object here
  });

  return <div ref={ref}>Content goes here...</div>;
}