Registry / web-framework / react-measure

react-measure

library2.5.2jsnpmunverified

react-measure is a React component that efficiently computes the dimensions and position of its child components. It leverages the browser's native `ResizeObserver` API to detect element dimension changes, offering a performant alternative to traditional polling or window resize event listeners. The library includes a polyfill for `ResizeObserver` to ensure broad browser compatibility across different environments. Currently stable at version 2.5.2, `react-measure` functions as a render prop component, allowing developers to precisely specify which rectangle properties (such as `client`, `offset`, `scroll`, `bounds`, or `margin`) are needed. Its key differentiator is the `ResizeObserver` integration, providing accurate and efficient measurement updates with minimal overhead, suitable for responsive designs and component queries. The package has been in a maintenance phase since its last major updates, providing a stable and reliable utility.

web-framework observability

npm install react-measure

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-MEASURE

react-measure

web-frameworkjavascriptv2.5.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Measure

✓ import Measure from 'react-measure';

✗ import { Measure } from 'react-measure';

The primary `Measure` component is a default export of the library.

Measure (CJS)

✓ const Measure = require('react-measure');

For CommonJS environments or older Node.js projects, use the `require` syntax.

UMD Global

✓ const Measure = ReactMeasure;

When using the UMD build directly in a browser via a `<script>` tag, the library exposes itself as the global `ReactMeasure` object.

This example demonstrates how to wrap a component with `Measure` to obtain its dimensions and apply responsive styling based on its width. It logs the measurements to the console and displays them within the component itself.

import React, { Component } from 'react'; import Measure from 'react-measure'; import classNames from 'classnames'; class ItemToMeasure extends Component { state = { dimensions: { width: -1, height: -1, }, }; render() { const { width, height } = this.state.dimensions; // Example of a responsive class name based on width const className = classNames('measured-item', { 'small-width-modifier': width < 400 && width !== -1, 'medium-width-modifier': width >= 400 && width < 800, 'large-width-modifier': width >= 800, }); return ( <Measure bounds // Request bounding client rect measurements margin // Request computed margin properties onResize={(contentRect) => { this.setState({ dimensions: contentRect.bounds, }); console.log('Component resized:', contentRect.bounds); }} > {({ measureRef, contentRect }) => ( <div ref={measureRef} className={className} style={{ padding: '20px', border: '1px solid #ccc', minHeight: '100px' }}> <p>I am a component being measured!</p> {contentRect.bounds.width !== -1 && ( <div> <p>Width: {Math.round(contentRect.bounds.width)}px</p> <p>Height: {Math.round(contentRect.bounds.height)}px</p> </div> )} <div style={{ background: '#eee', padding: '10px', marginTop: '10px' }}> Current Class: {className} </div> </div> )} </Measure> ); } } // To run this, you'd typically render ItemToMeasure in a React root: // ReactDOM.render(<ItemToMeasure />, document.getElementById('root')); export default ItemToMeasure;

Debug

Known issues

gotchaThe `onResize` callback is typically invoked twice on initial mount. The first call comes from `componentDidMount` with initial values, and the second from the `ResizeObserver` once it has established its observation. Consumers should account for this behavior if precise initialization logic is required.

fix

Be aware that `onResize` will fire twice on mount. You may need to debounce or conditionally handle the first call if it causes undesirable side effects, though typically the second call from `ResizeObserver` will provide the most accurate initial state.

affects: >=2.0.0

gotcha`react-measure` requires its `children` prop to be a function, following the render prop pattern. Providing anything other than a function will result in a runtime error.

fix

Ensure that the direct child of the `Measure` component is always a function, receiving `{ measureRef, measure, contentRect }` as arguments.

affects: >=2.0.0

gotchaTo correctly measure a component, the `measureRef` prop received from the `Measure` render prop must be passed down to the `ref` of the actual DOM element you intend to measure. Failing to do so will prevent `react-measure` from obtaining a valid node.

fix

Apply `ref={measureRef}` to the root HTML element or a class component (if using `innerRef` for function components or other custom components) that you want `Measure` to observe.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: Children must be a function.

The `Measure` component expects a function as its direct child, implementing the render prop pattern.

fix

Wrap your component logic within a function passed as a child to `Measure`: `<Measure>{({ measureRef }) => (<div ref={measureRef}>...</div>)}</Measure>`.

Uncaught TypeError: Cannot read properties of undefined (reading 'measureRef')

This error often occurs when the render prop function's arguments are destructured incorrectly or `measureRef` is used outside the scope of the render prop.

fix

Ensure `measureRef` is correctly destructured from the render prop's arguments: `{({ measureRef, contentRect }) => ...}` and used within that function's scope.

ResizeObserver loop limit exceeded

While `react-measure` aims to prevent this, continuous updates within the `onResize` callback that themselves cause layout changes can lead to an infinite loop, especially if styles are directly manipulated based on measurements without proper debounce or condition checks.

fix

Carefully manage state updates within the `onResize` handler. Ensure that style changes based on measurements do not create a feedback loop that continuously triggers new resize events. Consider debouncing the `onResize` callback if you're performing heavy DOM manipulations or complex state updates.

Upgrade

Version history

2.5.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency for building React applications.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/souporserious/react-measure ↗

packagehttps://www.npmjs.com/package/react-measure ↗

homepagehttps://docs.sheetjs.com/ ↗