Compute measurements of React components.
npm install react-measure
Compute measurements of React components. Uses aResizeObserver
to detect when an element's dimensions have changed.
Includes a
polyfill for ResizeObserver
in unsupported browsers.
yarn add react-measure
npm install react-measure --save
``htmlReactMeasure
(UMD library exposed as )`
Wrap any child component and calculate its client rect.
#### client: PropTypes.bool
Adds the following to contentRect.client returned in the child function.
clientTop,
clientLeft,
clientWidth,
and
clientHeight.
#### offset: PropTypes.bool
Adds the following to contentRect.offset returned in the child function.
offsetTop,
offsetLeft,
offsetWidth,
and
offsetHeight.
#### scroll: PropTypes.bool
Adds the following to contentRect.scroll returned in the child function.
scrollTop,
scrollLeft,
scrollWidth,
and
scrollHeight.
#### bounds: PropTypes.bool
Uses
getBoundingClientRect
to calculate the element rect and add it to contentRect.bounds returned in the
child function.
#### margin: PropTypes.bool
Uses
getComputedStyle
to calculate margins and add it to contentRect.margin returned in the child
function.
#### innerRef: PropTypes.func
Use this to access the internal component ref.
#### onResize: PropTypes.func
Callback invoked when either element width or height have changed. Note that this will be called twice on mount to get the initial values. The first call will come from componentDidMount while the second call will come from the ResizeObserver.
#### children: PropTypes.func
Children must be a function. Will receive the following object shape:
- measureRef: must be passed down to your component's ref in order to obtain a
proper node to measure
- measure: use to programmatically measure your component, calls the internalmeasure
method in withContentRect
- contentRect: this will contain any of the following allowed rects fromclient
above: , offset, scroll, bounds, or margin. It will alsoentry
include from the ResizeObserver when available.
`javascript
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 (
onResize={contentRect => {
this.setState({ dimensions: contentRect.bounds })
}}
>
{({ measureRef }) => (
withContentRect(types) HoC
A higher-order component that provides dimensions to the wrapped component.
Accepts
, which determines what measurements are returned, similar to
above. Then returns a function to pass the component you want measured.Pass an array or single value of either
client, offset, scroll, bounds,
or margin to calculate and receive those measurements as the prop
contentRect in your wrapped component. You can also use the measure function
passed down to programmatically measure your component if you need to. And
finally, remember to pass down the measureRef to the component you want
measured.Passes down the same props as the
Measure child function above, measureRef,
measure, and contentRect.Fun fact, the
Measure component is a thin wrapper around withContentRect.
Just check
the source.
This means your wrapped component will accept the same props as Measure does
š$3
`javascript
import { withContentRect } from 'react-measure'const ItemToMeasure = withContentRect('bounds')(
({ measureRef, measure, contentRect }) => (
Some content here
{JSON.stringify(contentRect, null, 2)}
)
)
`Run Example
clone repo
move into folder
install package dependencies
move into site folder and install local site dependencies
run development mode