` | External ref to observe (use with caution) | `undefined` |\r\n\r\n## Advanced Examples\r\n\r\n### Responsive Component\r\n\r\n```jsx\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nconst ResponsiveCard = () => {\r\n const { width, ref } = useResizeDetector();\r\n\r\n const cardStyle = {\r\n padding: width > 600 ? '2rem' : '1rem',\r\n fontSize: width > 400 ? '1.2em' : '1em',\r\n flexDirection: width > 500 ? 'row' : 'column',\r\n };\r\n\r\n return (\r\n \r\n
Responsive Card
\r\n
Width: {width}px
\r\n
Optimized: {width}px wide
;\r\n};\r\n```\r\n\r\n### Disable Re-renders\r\n\r\n```jsx\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nconst NonRerenderingComponent = () => {\r\n const { ref } = useResizeDetector({\r\n // Disable re-renders triggered by the hook\r\n disableRerender: true,\r\n // Handle resize events through callback only\r\n onResize: ({ width, height }) => {\r\n // Update external state or perform side effects\r\n // without causing component re-renders\r\n console.log('Resized to:', width, height);\r\n },\r\n });\r\n\r\n return This component won't re-render on resize
;\r\n};\r\n```\r\n\r\n## Browser Support\r\n\r\n- ā
Chrome 64+\r\n- ā
Firefox 69+\r\n- ā
Safari 13.1+\r\n- ā
Edge 79+\r\n\r\nFor older browsers, consider using a [ResizeObserver polyfill](https://github.com/que-etc/resize-observer-polyfill).\r\n\r\n## Testing\r\n\r\n```jsx\r\nconst { ResizeObserver } = window;\r\n\r\nbeforeEach(() => {\r\n delete window.ResizeObserver;\r\n // Mock ResizeObserver for tests\r\n window.ResizeObserver = jest.fn().mockImplementation(() => ({\r\n observe: jest.fn(),\r\n unobserve: jest.fn(),\r\n disconnect: jest.fn(),\r\n }));\r\n});\r\n\r\nafterEach(() => {\r\n window.ResizeObserver = ResizeObserver;\r\n jest.restoreAllMocks();\r\n});\r\n```\r\n\r\n## Performance Tips\r\n\r\n1. **Use `handleWidth`/`handleHeight: false`** if you only need one dimension\r\n2. **Enable `skipOnMount: true`** if you don't need initial measurements\r\n3. **Use `debounce` or `throttle`** for expensive resize handlers\r\n4. **Specify `observerOptions.box`** for consistent measurements\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## ā¤ļø Support\r\n\r\nShow us some love and STAR ā the project if you find it useful\r\n","readmeFilename":"README.md","users":{"bsara":true,"jsrraman":true,"sonsoleslp":true,"vparaskevas":true,"fluffycloud.project":true}}![](\"https://img.shields.io/npm/v/react-resize-detector?style=flat-square\")
![](\"https://img.shields.io/npm/l/react-resize-detector?style=flat-square\")
![](\"https://img.shields.io/npm/dm/react-resize-detector?style=flat-square\")
![](\"https://img.shields.io/bundlejs/size/react-resize-detector?style=flat-square\")
\r\n\r\n#### [Live demo](https://react-resize-detector.vercel.app/)\r\n\r\nModern 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.\r\n\r\nš„ Tiny ~2kb\r\n\r\nš¼ Written in TypeScript\r\n\r\nš Used by 170k repositories\r\n\r\nš¦ Produces 100 million downloads annually\r\n\r\nNo `window.resize` listeners! No timeouts!\r\n\r\n## Should you use this library?\r\n\r\n**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.\r\n\r\n