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.
React Measure 0.1.2
Compute measurements of React components.
Install
npm install react-measure --save
bower install react-measure --save
Example using ES6 & Babel Stage 0
import Measure from 'react-measure';
class ItemToMeasure extends Component {
state = {
dimensions: {}
}
render() {
const { width, height, top, right, bottom, left } = this.state.dimensions;
return(
<Measure
clone={true}
whitelist={['width', 'height']}
blacklist={['top', 'left']}
onChange={d => this.setState({dimensions: d})}
>
<div>
I can do cool things with my dimensions now :D
</div>
</Measure>
)
}
}
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.
Run Example
clone repo
git clone git@github.com: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
0.1.2
Clone prop now exposed to allow optional cloning of component
0.1.1
Set width/height to auto on clone no matter what to get a true dimension
Append clone directly after original instead of the end of its parent
Portal now gets destroyed after measurements have been calculated
0.1.0
Rewritten to be more React friendly
Measure component no longer accepts a child function, instead get dimensions by setting state in onChange callback
0.1.2
Clone prop now exposed to allow optional cloning of component
Defaults to false which could potentially break components relying on cloned
calculations