Function useOnElementResize

Custom React hook that detects resize events on a specified element.

This hook utilizes the ResizeObserver API to listen for changes in the dimensions of the referenced element. It executes the provided effect callback whenever the element is resized, with an optional debounce delay to limit the frequency of calls.

Example

const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const handleResize = () => {
    console.log('Element resized');
  };

  useOnElementResize(ref, handleResize, { delay: 100 });

  return <div ref={ref} style={{ width: '100%', height: '100px' }}>Resize me!</div>;
};