Function useDOMRect

Custom React hook that retrieves the DOMRect of a referenced element.

This hook utilizes the getBoundingClientRect method to obtain the size and position of the element referenced by the provided ref. It automatically updates the rect on window resize and scroll events, as well as when the element itself resizes.

Example

const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const rect = useDOMRect({ ref });

  return (
    <div ref={ref}>
      <p>The element's position: {rect ? `${rect.x}, ${rect.y}` : 'Loading...'}</p>
    </div>
  );
};