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 0.0.5

Compute measurements of React components.

Example Usage

import Measure from 'react-measure';

<Measure>
  {({width, height, top, left}) =>
    <div>
      {/* do cool stuff with my dimensions */}
    </div>
  }
</Measure>