# Handle element resizes like it's 2025!

#### [Live demo](https://react-resize-detector.vercel.app/) Modern browsers now have native support for detecting element size changes through [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). This library utilizes ResizeObservers to facilitate managing element size changes in React applications. 🐥 Tiny ~2kb 🐼 Written in TypeScript 🐠 Used by 170k repositories 🦄 Produces 100 million downloads annually No `window.resize` listeners! No timeouts! ## Should you use this library? **Consider CSS Container Queries first!** They now work in [all major browsers](https://caniuse.com/css-container-queries) and might solve your use case with pure CSS.

CSS Container Queries Example

```html

Card title

Card content

``` ```css .post { container-type: inline-size; } /* Default heading styles for the card title */ .card h2 { font-size: 1em; } /* If the container is larger than 700px */ @container (min-width: 700px) { .card h2 { font-size: 2em; } } ```

**Use this library when you need:** - JavaScript-based resize logic with full TypeScript support - Complex calculations based on dimensions - Integration with React state/effects - Programmatic control over resize behavior ## Installation ```bash npm install react-resize-detector # OR yarn add react-resize-detector # OR pnpm add react-resize-detector ``` ## Quick Start ### Basic Usage ```tsx import { useResizeDetector } from 'react-resize-detector'; const CustomComponent = () => { const { width, height, ref } = useResizeDetector(); return

{`${width}x${height}`}

; }; ``` ### With Resize Callback ```tsx import { useCallback } from 'react'; import { useResizeDetector, OnResizeCallback } from 'react-resize-detector'; const CustomComponent = () => { const onResize: OnResizeCallback = useCallback((payload) => { if (payload.width !== null && payload.height !== null) { console.log('Dimensions:', payload.width, payload.height); } else { console.log('Element unmounted'); } }, []); const { width, height, ref } = useResizeDetector({ onResize, }); return

{`${width}x${height}`}

; }; ``` ### With External Ref (Advanced) _It's not advised to use this approach, as dynamically mounting and unmounting the observed element could lead to unexpected behavior._ ```tsx import { useRef } from 'react'; import { useResizeDetector } from 'react-resize-detector'; const CustomComponent = () => { const targetRef = useRef(null); const { width, height } = useResizeDetector({ targetRef }); return

{`${width}x${height}`}

; }; ``` ## API Reference ### Hook Signature ```typescript useResizeDetector( props?: useResizeDetectorProps ): UseResizeDetectorReturn ``` ### Props | Prop | Type | Description | Default | | ----------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ----------- | | `onResize` | `(payload: ResizePayload) => void` | Callback invoked with resize information | `undefined` | | `handleWidth` | `boolean` | Trigger updates on width changes | `true` | | `handleHeight` | `boolean` | Trigger updates on height changes | `true` | | `skipOnMount` | `boolean` | Skip the first resize event when component mounts | `false` | | `refreshMode` | `'throttle' \| 'debounce'` | Rate limiting strategy. See [lodash docs](https://lodash.com/docs) | `undefined` | | `refreshRate` | `number` | Delay in milliseconds for rate limiting | `1000` | | `refreshOptions` | `{ leading?: boolean; trailing?: boolean }` | Additional options for throttle/debounce | `undefined` | | `observerOptions` | `ResizeObserverOptions` | Options passed to [`resizeObserver.observe`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe) | `undefined` | | `targetRef` | `MutableRefObject` | External ref to observe (use with caution) | `undefined` | ## Advanced Examples ### Responsive Component ```jsx import { useResizeDetector } from 'react-resize-detector'; const ResponsiveCard = () => { const { width, ref } = useResizeDetector(); const cardStyle = { padding: width > 600 ? '2rem' : '1rem', fontSize: width > 400 ? '1.2em' : '1em', flexDirection: width > 500 ? 'row' : 'column', }; return (

Responsive Card

Width: {width}px

); }; ``` ### Chart Resizing ```jsx import { useResizeDetector } from 'react-resize-detector'; import { useEffect, useRef } from 'react'; const Chart = () => { const chartRef = useRef(null); const { width, height, ref } = useResizeDetector({ refreshMode: 'debounce', refreshRate: 100, }); useEffect(() => { if (width && height && chartRef.current) { // Redraw chart with new dimensions redrawChart(chartRef.current, width, height); } }, [width, height]); return

Paket	Downloads	Stars	Größe	Issues	Veröffentlichung	Lizenz

react-resize-detector	1,141,997	1,289	66.4 kB	5	vor 2 Monaten	MIT