react-measure

What is react-measure?

The react-measure package is a React component that allows you to measure the dimensions and position of a DOM element. It provides a declarative way to get the size and position of elements, which can be useful for responsive design, animations, and other dynamic UI behaviors.

What are react-measure's main functionalities?

Measure Dimensions

This feature allows you to measure the width and height of a DOM element. The `Measure` component wraps around the element you want to measure, and the `onResize` callback updates the state with the new dimensions whenever the element is resized.

import React from 'react';
import Measure from 'react-measure';

class MyComponent extends React.Component {
  state = {
    dimensions: {
      width: -1,
      height: -1
    }
  };

  render() {
    return (
      <Measure
        bounds
        onResize={(contentRect) => {
          this.setState({ dimensions: contentRect.bounds });
        }}
      >
        {({ measureRef }) => (
          <div ref={measureRef} style={{ width: '100%' }}>
            <p>The width of this element is {this.state.dimensions.width}px</p>
            <p>The height of this element is {this.state.dimensions.height}px</p>
          </div>
        )}
      </Measure>
    );
  }
}

export default MyComponent;

Measure Position

This feature allows you to measure the position (top and left) of a DOM element. The `Measure` component wraps around the element you want to measure, and the `onResize` callback updates the state with the new position whenever the element is resized.

import React from 'react';
import Measure from 'react-measure';

class MyComponent extends React.Component {
  state = {
    position: {
      top: -1,
      left: -1
    }
  };

  render() {
    return (
      <Measure
        bounds
        onResize={(contentRect) => {
          this.setState({ position: contentRect.bounds });
        }}
      >
        {({ measureRef }) => (
          <div ref={measureRef} style={{ position: 'relative' }}>
            <p>The top position of this element is {this.state.position.top}px</p>
            <p>The left position of this element is {this.state.position.left}px</p>
          </div>
        )}
      </Measure>
    );
  }
}

export default MyComponent;

Other packages similar to react-measure

react-resize-detector

react-resize-detector is a lightweight package that provides a higher-order component and a hook to detect resize events on a DOM element. It is similar to react-measure in that it allows you to measure the dimensions of an element, but it does not provide as many detailed measurements (e.g., position).

react-use-measure

react-use-measure is a React hook that allows you to measure the size and position of a DOM element. It is similar to react-measure but uses hooks instead of a component-based API, making it more suitable for modern React applications that prefer hooks.

react-sizeme

react-sizeme is a higher-order component that makes it easy to measure the size of a component. It is similar to react-measure in that it provides dimensions, but it is more focused on providing a simple API for measuring size without additional features like position measurement.

README

React Measure

Compute measurements of React components. Uses resize-observer-polyfill to detect changes of an element and return the new dimensions.

Install

npm install react-measure --save

<script src="https://unpkg.com/react-measure/dist/react-measure.js"></script>
(UMD library exposed as `Measure`)

Codepen Demo

Live Demo

Example Usage w/ state

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
    const className = classNames(
      (width < 400) && 'small-width-modifier'
    )

    return (
      <Measure
        onMeasure={(dimensions) => {
          this.setState({dimensions})
        }}
      >
        <div className={className}>
          I can do cool things with my dimensions now :D

          { (height > 250) &&
            <div>Render responsive content based on the component size!</div>
          }
        </div>
      </Measure>
    )
  }
}

Example Usage w/ child function

import Measure from 'react-measure';

const ItemToMeasure = () => (
  <Measure>
    { dimensions =>
      <div>
        Some content here
        <pre>
          {JSON.stringify(dimensions, null, 2)}
        </pre>
      </div>
    }
  </Measure>
)

Props

whitelist: PropTypes.array

Provide a list of properties that determine when onMeasure should fire. Accepts any of the following properties ['width', 'height', 'top', 'right', 'bottom', 'left']

blacklist: PropTypes.array

Like above, but will not fire onMeasure for the specified properties.

includeMargin: PropTypes.bool

Whether or not to include margins in calculation. Defaults to true.

useClone: PropTypes.bool

Tries to give the most accurate measure by cloning the element and measuring it. Use if your item is hidden or you want to determine what a new dimension will be.

cloneOptions: PropTypes.Object

Passes clone options to getNodeDimensions.

shouldMeasure: PropTypes.bool

Determines whether or not a measurement should occur. Useful if you only need to measure in certain cases.

onMeasure: PropTypes.func

Callback when the component dimensions have changed. Receives the new dimensions of your component.

Good to knows

To help avoid layout thrashing, use the prop blacklist to ignore specific values and stop firing a render to check the DOM for changes. Likewise you can use whitelist to choose only the ones you need to check.

Margins from hell. If your element is not calculating width or height properly it could be due to a margin hanging outside of its container. To get a true measurement, make sure to not have any hanging margins, in some cases a padding of 1px added to the container will fix this. See the stack overflow answers here for more tricks .

Run Example

clone repo

git clone [e-mail]:souporserious/react-measure.git

move into folder

cd ~/react-measure

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/

Changelog

1.4.6

Update to resize-observer-polyfill 1.4.1