React Hook to Measure Element Bounds

Common errors

• ReferenceError: ResizeObserver is not defined

  cause The browser or runtime environment does not natively support the ResizeObserver API, and a polyfill has not been provided.
  fix Install `@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')

  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.
  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.

• TypeError: (0 , react_use_measure__WEBPACK_IMPORTED_MODULE_2__.useMeasure) is not a function

  cause Attempting to import `useMeasure` as a named export with curly braces, when it is a default export of the package.
  fix Change the import statement from `import { useMeasure } from 'react-use-measure'` to `import useMeasure from 'react-use-measure'`.

Warnings

• gotcha 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.
  Fix: Conditionally render UI based on `bounds.width > 0` or provide placeholder content during the initial render.
• gotcha `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.
  Fix: Install `@juggle/resize-observer` (or another polyfill) and inject it via the `polyfill` option: `useMeasure({ polyfill: ResizeObserver })`.
• gotcha `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.
  Fix: Use an external utility like `react-merge-refs` to combine multiple refs onto a single DOM element.
• gotcha 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`.
  Fix: Pass `{ scroll: true }` to the `useMeasure` hook options: `useMeasure({ scroll: true })`.

Install

• npm install react-use-measure npm
• yarn add react-use-measure yarn
• pnpm add react-use-measure pnpm

Imports

• useMeasure
  wrong:

  import { useMeasure } from 'react-use-measure'

  correct:

  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.

Quickstart

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;