use-element-resize.ts

import {RefObject, useEffect, useRef} from 'react';

export default function useElementResized<T extends HTMLElement>(
  check: (entry: ResizeObserverEntry, element: T) => boolean,
  callback: (element: T) => void,
  ref?: RefObject<T>
) {
  const backupRef = useRef<T>(null);
  const actualRef = ref ?? backupRef;

  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      if (!actualRef.current) {
        return;
      }

      if (check(entries[0], actualRef.current)) {
        callback(actualRef.current);
      }
    });

    if (actualRef.current && actualRef.current instanceof Element) {
      resizeObserver.observe(actualRef.current);
    }

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

  return actualRef;
}