useSize is a hook that tracks the dimensions of an HTML element, automatically updating when the element is resized. It uses the ResizeObserver API to efficiently monitor size changes.
Installation
npm install @radix-ui/react-use-size
Function Signature
function useSize(
element: HTMLElement | null
): { width: number; height: number } | undefined
Parameters
element
HTMLElement | null
required
The HTML element to observe for size changes. When null, the hook returns undefined.
Return Value
size
{ width: number; height: number } | undefined
An object containing the element’s width and height in pixels, or undefined if no element is provided.
Usage
Basic Example
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>
);
}
With useRef
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>
);
}
Responsive Component
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>
);
}
Tracking Container Changes
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>
);
}
Implementation Details
The hook:
- Provides the initial size immediately using
offsetWidth and offsetHeight
- Creates a
ResizeObserver to watch for size changes
- Uses the
borderBoxSize API when available for more accurate measurements
- Falls back to
offsetWidth/offsetHeight for older browsers
- Observes the element with
box: 'border-box' to include borders and padding
- Cleans up the observer when the element changes or component unmounts
- Returns
undefined when the element becomes null
Browser Compatibility
This hook uses the ResizeObserver API, which is supported in all modern browsers. For older browsers, you may need a polyfill.
Notes
The hook uses useLayoutEffect to set the initial size as early as possible and set up the ResizeObserver, ensuring measurements are taken before the browser paints.
The size is measured using the border box, which includes the element’s content, padding, and border, but not its margin.
The hook handles browser inconsistencies by checking for borderBoxSize support and falling back to offsetWidth/offsetHeight when necessary.
