useResizeObserver Hook

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

type ElementSize = {
  width: number;
  height: number;
  top: number;
  left: number;
};

function useResizeObserver<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>
): ElementSize | null {
  const [size, setSize] = useState<ElementSize | null>(null);

  useEffect(() => {
    const element = ref.current;
    __TOKEN_14__ (!element || !window.ResizeObserver) return;

    const resizeObserver = new ResizeObserver((entries) => {
      const entry = entries[0];
      __TOKEN_19__ (entry) {
        const { width, height, top, left } = entry.contentRect;
        setSize({ width, height, top, left });
      }
    });

    resizeObserver.observe(element);

    __TOKEN_21__ () => {
      resizeObserver.unobserve(element);
      resizeObserver.disconnect();
    };
  }, [ref]);

  return size;
}

// Usage example
// const containerRef = useRef<HTMLDivElement>(null);
// const size = useResizeObserver(containerRef);
// <div ref={containerRef}>
//   {size && <p>Width: {size.width}px, Height: {size.height}px</p>}
// </div>