Get notified when your React component changes dimensions

Usage no npm install needed!

<script type="module">
  import reactMeasurable from '';


React-Measurable 📐

Decorate your React component and get notified when its dimensions change.


npm install react-measurable


React-measurable is compatible with React 16.3 and React strict mode since it uses the new createRef API.

It also depends on resize-observer-polyfill for browsers that don't support the ResizeObserver API (non-Chrome). The performance depends entirely on the polyfill performance.



  1. Decorate your component with @measurable.
  2. In your componentDidMount lifecycle method, make sure you call observeResize.
  3. If you use Typescript, the component's props need to extend MeasurableProps.
  4. You don't need to worry about unobserving the DOM node - the decorator handles that.
import * as React from "react";
import { measurable, MeasurableProps } from "../src";

interface MyProps extends MeasurableProps {}

export class MyComponent extends React.Component<MyProps> {
  ref = React.createRef<HTMLDivElement>();

  componentDidMount() {
    this.props.observeResize(this.ref, (rect, target) => {
      // Do something

  render() {
    return <div ref={this.ref}>A div that could change size</div>;


The decorator adds an additional prop to your component. The prop is a registration function which needs to be called in your componentDidMount lifecycle method.

You need to pass a ref to your DOM node and a callback to the observeResize function. The DOM node ref can be any DOM node, not necessarily the one rendered by the decorated component. The ref needs to be a React.RefObject, supported in React 16.3. The callback will be called when a size change is observer and will be passed a DOMRectReadyOnly object and a the actual observed DOM node.

// The Element and DOMRectReadOnly are standard DOM types.
export interface MeasurableProps extends React.Attributes {
  observeResize?: <T extends Element>(
    ref: React.RefObject<T>,
    callback: (rect: DOMRectReadOnly, target: T) => void
  ) => void;


The decorator makes very little assumptions about how you use it. It does not perform extra measurements on components apart from what the polyfill does. It only notifies your component when its size changes, with a minimal API.

If you want notifications to parent components, you could do the following:

interface MyProps extends MeasurableProps {
  // Passed by the parent to observe clild resizes
  onResize: (rect: ClientRect) => void;

export class MyComponent extends React.Component<MyProps> {
  // ...
  componentDidMount() {
    this.props.observeResize(this.ref, (rect, target) => {
      // Perform more measurements
  // ...

The decorator doesn't use prop-types because, well, typescript exists.