Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
useMeasure
✓ import useMeasure from 'react-use-measure'
✗ import { useMeasure } from 'react-use-measure'
This is a default export, not a named export. Ensure you import it without curly braces.
ResizeObserver
✓ import { ResizeObserver } from '@juggle/resize-observer'
Used to inject a polyfill for `ResizeObserver` if not natively available in the target environment or to provide a specific implementation via the `polyfill` option.
mergeRefs
✓ import { mergeRefs } from 'react-merge-refs'
When you need to assign multiple refs (e.g., `useMeasure`'s ref and your own `useRef`) to the same DOM element, you must use an external utility like `react-merge-refs` to combine them.
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.
import useMeasure from 'react-use-measure';
import { useRef, useEffect } from 'react';
import { ResizeObserver } from '@juggle/resize-observer'; // Optional polyfill
function App() {
const [ref, bounds] = useMeasure({
// Optional: inject a polyfill if your target environments don't support ResizeObserver
polyfill: typeof window !== 'undefined' && 'ResizeObserver' in window ? undefined : ResizeObserver,
debounce: 100, // Debounce updates for performance
scroll: true // React to scroll changes within parent elements
});
// Example of using the bounds in a side effect
useEffect(() => {
if (bounds.width > 0) {
console.log('Element dimensions:', bounds.width, 'x', bounds.height);
}
}, [bounds]);
return (
<div style={{ padding: '20px', border: '1px solid #ccc', marginBottom: '20px' }}>
<h1>ResizeObserver Hook Example</h1>
<p>Resize your browser window or interact with the measured div.</p>
<div
ref={ref}
style={{
width: '50%',
minHeight: '100px',
background: 'lightblue',
resize: 'both', // Allows manual resizing
overflow: 'auto',
margin: '20px auto',
padding: '10px'
}}
>
<p>This div is measured:</p>
<p>Width: {bounds.width}px</p>
<p>Height: {bounds.height}px</p>
<p>Top: {bounds.top}px, Left: {bounds.left}px</p>
<div style={{ height: '200px', width: '100%', background: 'lightcoral', marginTop: '10px' }}>
Scrollable content inside.
{Array.from({ length: 50 }).map((_, i) => <div key={i}>Item {i}</div>)}
</div>
</div>
<div style={{ height: '500px', background: '#eee' }}>
A larger container to enable page scrolling and demonstrate `scroll: true`.
</div>
</div>
);
}
export default App;
Errors
Common errors & fixes
ReferenceError: ResizeObserver is not defined
The browser or runtime environment does not natively support the ResizeObserver API, and a polyfill has not been provided.
fixInstall `@juggle/resize-observer` and inject it into the `useMeasure` options: `import { ResizeObserver } from '@juggle/resize-observer'; useMeasure({ polyfill: ResizeObserver });` TypeError: Cannot read properties of undefined (reading 'width')
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.
fixEnsure 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.
TypeError: (0 , react_use_measure__WEBPACK_IMPORTED_MODULE_2__.useMeasure) is not a function
Attempting to import `useMeasure` as a named export with curly braces, when it is a default export of the package.
fixChange the import statement from `import { useMeasure } from 'react-use-measure'` to `import useMeasure from 'react-use-measure'`. Audit
Dependencies
reactrequiredRequired for all React hooks functionality.
react-domoptionalNeeded for DOM measurements within a React environment. It became an optional peer dependency in v2.1.3.