react-measure-it

React higher-order component to get dimensions of a container while it resizes

Showing:

Popularity

Downloads/wk

5

GitHub Stars

5

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

1.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-measure-it

build status

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

parametertypedescription
[options]objectoptional: Options
[options.getHeight]functionoptional: getHeight(element) should return element height, where element is the wrapper div. Defaults to element.clientHeight
[options.getWidth]functionoptional: 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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100