react-measure

React Measure wraps a child element and reports its computed dimensions back to your component via a render-prop function. Internally it uses the browser’s ResizeObserver API (with a bundled polyfill for browsers that lack native support) to detect layout changes and re-measure automatically, instead of relying on window resize listeners or manual polling.

The library ships two entry points: the Measure component, which takes a children-as-a-function pattern and hands back a measureRef to attach to the DOM node you want tracked, and the lower-level withContentRect(types) higher-order component that Measure itself is built on. Both let you opt into any combination of client, offset, scroll, bounds, and margin measurement types, so you only pay for the DOM reads you actually need.

It’s a small, focused utility rather than a full layout system: there’s no state management, styling, or virtual DOM diffing involved, just a thin adapter between ResizeObserver callbacks and React state updates, wrapped in requestAnimationFrame to batch re-renders.

What You Get

• A Measure render-prop component that hands you a measureRef to attach to any DOM node
• A withContentRect(types) higher-order component for wrapping class or function components directly
• Opt-in measurement types: client, offset, scroll, bounds, and margin rects
• An onResize callback fired on mount and on every subsequent size change
• A bundled resize-observer-polyfill so it works in browsers without native ResizeObserver support

Common Use Cases

• Building responsive components that change layout or content based on their own rendered width, independent of the viewport (element/container queries before native CSS container queries were available)
• Measuring a chart, canvas, or map container so a drawing library can be initialized with the correct pixel dimensions
• Syncing the height of a sibling element (e.g. an overlay or spacer) to a dynamically-sized component
• Triggering re-layout logic in a component library when nested content pushes the container past a width breakpoint

Under The Hood

Architecture The library is a thin layered adapter: index.js exports Measure and withContentRect, where Measure (in Measure.js) is itself just withContentRect() applied to a component that calls its children render prop. with-content-rect.js holds all the real logic in a single class component: it creates a ResizeObserver (native or the bundled polyfill, chosen via getWindowOf) in componentDidMount, observes the DOM node captured through _handleRef, and on every callback computes a contentRect object via getContentRect before batching the state update inside requestAnimationFrame. There’s no internal store or context — state lives entirely in the single WithContentRect instance, so the abstraction that would break if changed is the assumption that one ResizeObserver instance tracks exactly one DOM node per wrapped component.

Tech Stack Written in plain ES2017+ JavaScript (class properties, no TypeScript), transpiled with Babel (@babel/preset-env, @babel/preset-react, @babel/plugin-transform-runtime) and bundled with Rollup into UMD, CJS, and ESM outputs (rollup.config.js). Runtime dependencies are minimal: prop-types for prop validation, resize-observer-polyfill for cross-browser support, and get-node-dimensions (present in package.json but unused in src/, likely legacy). React and react-dom are peer dependencies only, supporting any React version above 0.13.

Code Quality Tests live under src/__tests__/Measure.test.js using Jest with jest-environment-jsdom and snapshot testing; they mock global.ResizeObserver and requestAnimationFrame to drive the observer callback synchronously and assert on rendered snapshots and call counts. Coverage is limited to the Measure component’s mount/resize/unmount paths — the withContentRect internals and get-content-rect/get-window-of helpers have no dedicated unit tests. There’s no TypeScript, and no CI configuration is present in the repo, though test:ci exists as an npm script. Code style is enforced only via a checked-in .prettierrc, with no ESLint config visible.

What Makes It Unique Its contribution isn’t a novel measurement technique — getBoundingClientRect, getComputedStyle, and ResizeObserver are all standard browser APIs — but the API surface: exposing granular, opt-in measurement types (client/offset/scroll/bounds/margin) individually rather than always computing every rect, and offering both a render-prop component and a lower-level HOC built from the same shared implementation. This predates native CSS container queries, and was one of the more established patterns for size-based responsive React components before browsers shipped container queries directly.