useSize

npm install @radix-ui/react-use-size

function useSize(
  element: HTMLElement | null
): { width: number; height: number } | undefined

import { useSize } from '@radix-ui/react-use-size';
import { useState } from 'react';

function ResizableBox() {
  const [element, setElement] = useState<HTMLDivElement | null>(null);
  const size = useSize(element);

  return (
    <div>
      <div 
        ref={setElement}
        style={{ resize: 'both', overflow: 'auto', border: '1px solid' }}
      >
        Resize me!
      </div>
      {size && (
        <p>
          Width: {size.width}px, Height: {size.height}px
        </p>
      )}
    </div>
  );
}

import { useSize } from '@radix-ui/react-use-size';
import { useRef } from 'react';

function Component() {
  const containerRef = useRef<HTMLDivElement>(null);
  const size = useSize(containerRef.current);

  return (
    <div ref={containerRef}>
      {size ? `${size.width} x ${size.height}` : 'Measuring...'}
    </div>
  );
}

import { useSize } from '@radix-ui/react-use-size';
import { useState } from 'react';

function ResponsiveCard() {
  const [element, setElement] = useState<HTMLDivElement | null>(null);
  const size = useSize(element);
  
  const isCompact = size && size.width < 400;

  return (
    <div ref={setElement} className={isCompact ? 'compact' : 'expanded'}>
      <h2>Responsive Card</h2>
      <p>Layout changes based on width</p>
    </div>
  );
}

import { useSize } from '@radix-ui/react-use-size';
import { useState, useEffect } from 'react';

function Container() {
  const [element, setElement] = useState<HTMLDivElement | null>(null);
  const size = useSize(element);

  useEffect(() => {
    if (size) {
      console.log('Container resized:', size);
      // Perform actions based on size changes
    }
  }, [size]);

  return (
    <div ref={setElement} style={{ width: '100%', height: '100vh' }}>
      Content
    </div>
  );
}