\n
ResizeObserver Hook Example
\n
Resize your browser window or interact with the measured div.
\n
\n This div is measured:
\n Width: {bounds.width}px
\n Height: {bounds.height}px
\n Top: {bounds.top}px, Left: {bounds.left}px
\n \n Scrollable content inside.\n {Array.from({ length: 50 }).map((_, i) =>
Item {i}
)}\n
\n A larger container to enable page scrolling and demonstrate `scroll: true`.\n
\n \n );\n}\n\nexport default App;","lang":"typescript","description":"This example demonstrates how to use `useMeasure` to get reactive bounds of a resizable and scrollable div, including optional polyfill injection and debouncing of updates. It also shows how to access the `bounds` object after the initial render."},"warnings":[{"fix":"Conditionally render UI based on `bounds.width > 0` or provide placeholder content during the initial render.","message":"The `bounds` object will initially contain zero values (`x: 0, y: 0, width: 0, height: 0, ...`) on the first render, as measurements are only possible after the element has been mounted to the DOM. Your UI should account for this initial state.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install `@juggle/resize-observer` (or another polyfill) and inject it via the `polyfill` option: `useMeasure({ polyfill: ResizeObserver })`.","message":"`react-use-measure` relies on the `ResizeObserver` API. If your target environments (e.g., older browsers) do not support `ResizeObserver`, you will need to provide a polyfill.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use an external utility like `react-merge-refs` to combine multiple refs onto a single DOM element.","message":"`useMeasure` returns its own functional ref for unmount tracking. If you need to assign another ref (e.g., from `useRef`) to the same element, you cannot do so directly. Using both will cause one to overwrite the other.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass `{ scroll: true }` to the `useMeasure` hook options: `useMeasure({ scroll: true })`.","message":"By default, `react-use-measure` does not react to changes caused by scrolling in parent elements. To enable this behavior, you must explicitly set the `scroll` option to `true`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `@juggle/resize-observer` and inject it into the `useMeasure` options: `import { ResizeObserver } from '@juggle/resize-observer'; useMeasure({ polyfill: ResizeObserver });`","cause":"The browser or runtime environment does not natively support the ResizeObserver API, and a polyfill has not been provided.","error":"ReferenceError: ResizeObserver is not defined"},{"fix":"Ensure you handle the initial state where `bounds` might not have meaningful values yet, for example, by checking `if (bounds.width > 0)` or providing default values.","cause":"Attempting to access `bounds.width` or other properties of the `bounds` object before the component has rendered and `useMeasure` has provided initial measurement values. `bounds` will be an empty object or have zero values initially.","error":"TypeError: Cannot read properties of undefined (reading 'width')"},{"fix":"Change the import statement from `import { useMeasure } from 'react-use-measure'` to `import useMeasure from 'react-use-measure'`.","cause":"Attempting to import `useMeasure` as a named export with curly braces, when it is a default export of the package.","error":"TypeError: (0 , react_use_measure__WEBPACK_IMPORTED_MODULE_2__.useMeasure) is not a function"}],"ecosystem":"npm"}