use-rect 📏🖼️

Hey there, Measurement Master! 📐

The use-rect hook is a convenient utility for getting the bounding rectangle (size and position) of a DOM element. It typically uses ResizeObserver (or a similar mechanism) to update the rectangle information whenever the element's size changes.

It's like having a live measuring tape 📏 and level for your components, always giving you their precise dimensions and location!

Why is it useful?

• Dynamic Layouts: Adjust component behavior or style based on its current size or position.
• Tooltips/Popovers: Help position floating elements relative to their anchor.
• Virtualization: Calculate item sizes for virtualized lists.
• Visualizations: Get dimensions for drawing on a canvas or SVG.

Basic Usage (Conceptual):

import { useRect } from '@ryvora/react-use-rect'; // Hook name might vary
import React, { useRef } from 'react';

function MySizedComponent() {
  const myRef = useRef<HTMLDivElement>(null);
  const rect = useRect(myRef); // Pass the ref to the element you want to measure

  return (
    <div>
      <div
        ref={myRef}
        style={{
          width: '50%',
          padding: '20px',
          border: '1px solid blue',
          resize: 'both', // Make it resizable for demo
          overflow: 'auto',
        }}
      >
        Resize me!
      </div>
      {rect && (
        <pre>
          My Current Rect: Width: {rect.width}px Height: {rect.height}px Top: {rect.top}px Left:{' '}
          {rect.left}px
        </pre>
      )}
    </div>
  );
}

Get the exact measure of your components and build responsive UIs! ✨📊