{"id":11748,"library":"react-measure","title":"React Measure","description":"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.","status":"maintenance","version":"2.5.2","language":"javascript","source_language":"en","source_url":"https://github.com/souporserious/react-measure","tags":["javascript","react","component","measure","measurements","dimensions","element-queries","container-queries","size"],"install":[{"cmd":"npm install react-measure","lang":"bash","label":"npm"},{"cmd":"yarn add react-measure","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-measure","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for building React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary `Measure` component is a default export of the library.","wrong":"import { Measure } from 'react-measure';","symbol":"Measure","correct":"import Measure from 'react-measure';"},{"note":"For CommonJS environments or older Node.js projects, use the `require` syntax.","symbol":"Measure (CJS)","correct":"const Measure = require('react-measure');"},{"note":"When using the UMD build directly in a browser via a `<script>` tag, the library exposes itself as the global `ReactMeasure` object.","symbol":"UMD Global","correct":"const Measure = ReactMeasure;"}],"quickstart":{"code":"import React, { Component } from 'react';\nimport Measure from 'react-measure';\nimport classNames from 'classnames';\n\nclass ItemToMeasure extends Component {\n  state = {\n    dimensions: {\n      width: -1,\n      height: -1,\n    },\n  };\n\n  render() {\n    const { width, height } = this.state.dimensions;\n    // Example of a responsive class name based on width\n    const className = classNames('measured-item', {\n      'small-width-modifier': width < 400 && width !== -1,\n      'medium-width-modifier': width >= 400 && width < 800,\n      'large-width-modifier': width >= 800,\n    });\n\n    return (\n      <Measure\n        bounds // Request bounding client rect measurements\n        margin // Request computed margin properties\n        onResize={(contentRect) => {\n          this.setState({\n            dimensions: contentRect.bounds,\n          });\n          console.log('Component resized:', contentRect.bounds);\n        }}\n      >\n        {({ measureRef, contentRect }) => (\n          <div ref={measureRef} className={className} style={{ padding: '20px', border: '1px solid #ccc', minHeight: '100px' }}>\n            <p>I am a component being measured!</p>\n            {contentRect.bounds.width !== -1 && (\n              <div>\n                <p>Width: {Math.round(contentRect.bounds.width)}px</p>\n                <p>Height: {Math.round(contentRect.bounds.height)}px</p>\n              </div>\n            )}\n            <div style={{ background: '#eee', padding: '10px', marginTop: '10px' }}>\n              Current Class: {className}\n            </div>\n          </div>\n        )}\n      </Measure>\n    );\n  }\n}\n\n// To run this, you'd typically render ItemToMeasure in a React root:\n// ReactDOM.render(<ItemToMeasure />, document.getElementById('root'));\n\nexport default ItemToMeasure;","lang":"javascript","description":"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."},"warnings":[{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure that the direct child of the `Measure` component is always a function, receiving `{ measureRef, measure, contentRect }` as arguments.","message":"`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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"To 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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap your component logic within a function passed as a child to `Measure`: `<Measure>{({ measureRef }) => (<div ref={measureRef}>...</div>)}</Measure>`.","cause":"The `Measure` component expects a function as its direct child, implementing the render prop pattern.","error":"TypeError: Children must be a function."},{"fix":"Ensure `measureRef` is correctly destructured from the render prop's arguments: `{({ measureRef, contentRect }) => ...}` and used within that function's scope.","cause":"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.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'measureRef')"},{"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.","cause":"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.","error":"ResizeObserver loop limit exceeded"}],"ecosystem":"npm"}