Custom useElementDimensions Hook for Tracking DOM Element Size

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

const useElementDimensions = () => {
  const ref = useRef(null);
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
    x: 0,
    y: 0,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  });

  useEffect(() => {
    const updateDimensions = () => {
      if (ref.current) {
        const { width, height, x, y, top, left, right, bottom } = ref.current.getBoundingClientRect();
        setDimensions({ width, height, x, y, top, left, right, bottom });
      }
    };

    // Initial dimensions
    updateDimensions();

    // Setup ResizeObserver if available
    if (typeof ResizeObserver !== 'undefined') {
      const observer = new ResizeObserver(entries => {
        // Only re-measure if the observed element is the one we care about
        if (entries[0] && entries[0].target === ref.current) {
          updateDimensions();
        }
      });
      if (ref.current) {
        observer.observe(ref.current);
      }
      return () => {
        if (ref.current) { // Ensure ref.current is still available during cleanup
          observer.unobserve(ref.current);
        }
        observer.disconnect();
      };
    } else {
      // Fallback for older browsers (less efficient)
      window.addEventListener('resize', updateDimensions);
      return () => {
        window.removeEventListener('resize', updateDimensions);
      };
    }
  }, []); // Empty dependency array ensures this runs once on mount

  return [ref, dimensions];
};

export default useElementDimensions;

// How to use:
// import useElementDimensions from './useElementDimensions';
// function MyResizableComponent() {
//   const [myRef, dimensions] = useElementDimensions();
//   return (
//     <div ref={myRef} style={{ border: '1px solid red', padding: '10px' }}>
//       <p>Width: {dimensions.width.toFixed(2)}px</p>
//       <p>Height: {dimensions.height.toFixed(2)}px</p>
//       <p>Top: {dimensions.top.toFixed(2)}px</p>
//       <p>Left: {dimensions.left.toFixed(2)}px</p>
//     </div>
//   );
// }