` | 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 ;
};
```
### Performance Optimization
```jsx
import { useResizeDetector } from 'react-resize-detector';
const OptimizedComponent = () => {
const { width, height, ref } = useResizeDetector({
// Only track width changes
handleHeight: false,
// Debounce rapid changes
refreshMode: 'debounce',
refreshRate: 150,
// Skip initial mount calculation
skipOnMount: true,
// Use border-box for more accurate measurements
observerOptions: { box: 'border-box' },
});
return Optimized: {width}px wide
;
};
```
### Disable Re-renders
```jsx
import { useResizeDetector } from 'react-resize-detector';
const NonRerenderingComponent = () => {
const { ref } = useResizeDetector({
// Disable re-renders triggered by the hook
disableRerender: true,
// Handle resize events through callback only
onResize: ({ width, height }) => {
// Update external state or perform side effects
// without causing component re-renders
console.log('Resized to:', width, height);
},
});
return This component won't re-render on resize
;
};
```
## Browser Support
- ✅ Chrome 64+
- ✅ Firefox 69+
- ✅ Safari 13.1+
- ✅ Edge 79+
For older browsers, consider using a [ResizeObserver polyfill](https://github.com/que-etc/resize-observer-polyfill).
## Testing
```jsx
const { ResizeObserver } = window;
beforeEach(() => {
delete window.ResizeObserver;
// Mock ResizeObserver for tests
window.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn(),
}));
});
afterEach(() => {
window.ResizeObserver = ResizeObserver;
jest.restoreAllMocks();
});
```
## Performance Tips
1. **Use `handleWidth`/`handleHeight: false`** if you only need one dimension
2. **Enable `skipOnMount: true`** if you don't need initial measurements
3. **Use `debounce` or `throttle`** for expensive resize handlers
4. **Specify `observerOptions.box`** for consistent measurements
## License
MIT
## ❤️ Support
Show us some love and STAR ⭐ the project if you find it useful
---
_Source: https://npm.io/package/react-resize-detector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
#### [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.