react-measure-it
v0.1.2
Published
React higher-order component (HOC) to get dimensions of a container while it resizes
Downloads
9
Maintainers
Readme
react-measure-it
React higher-order component (HOC) to get dimensions of a container while it resizes
MeasureIt([options], [options.getHeight], [options.getWidth])
Wraps a react component and adds properties containerHeight
and
containerWidth
. Useful for responsive design. Properties are update on
window resize or the container itself is being resized.
Can be used as a higher-order component.
Parameters
| parameter | type | description |
| --------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| [options]
| object | optional: Options |
| [options.getHeight]
| function | optional: getHeight(element)
should return element height, where element is the wrapper div. Defaults to element.clientHeight
|
| [options.getWidth]
| function | optional: getWidth(element)
should return element width, where element is the wrapper div. Defaults to element.clientWidth
|
Example
// ES2015
import React from 'react'
import MeasureIt from 'react-measure-it'
class MyComponent extends React.Component {
render() (
<div
containerWidth={this.props.containerWidth}
containerHeight={this.props.containerHeight}
>
</div>
)
}
export default MeasureIt()(MyComponent) // Enhanced component
// ES2015 - parent Size
import React from 'react'
import MeasureIt from 'react-measure-it'
function getWidth (element) {
return ReactDOM.findDOMNode(element).parentNode.getBoundingClientRect().width
}
function getHeight (element) {
return ReactDOM.findDOMNode(element).parentNode.getBoundingClientRect().height
}
class MyComponent extends React.Component {
render() (
<div
containerWidth={this.props.containerWidth}
containerHeight={this.props.containerHeight}
>
</div>
)
}
export default MeasureIt({getWidth: getWidth, getHeight: getHeight})(MyComponent) // Enhanced component
Returns function
, Returns a higher-order component that can be used to enhance a react component MeasureIt()(MyComponent)
Credits
- https://www.npmjs.com/package/element-resize-event
- https://www.npmjs.com/package/react-dimensions
Live Example
Will open a browser window for localhost:9966
npm i && npm i react react-dom && npm start
Installation
Requires nodejs.
$ npm install react-measure-it
Tests
$ npm test