berrtech/react-size-reporter

React component-wrapper detecting size changes of its children

react-size-reporter

React component-wrapper detecting size changes of its children.

Heavily inspired by react-height but somehow it wasn't accurate enough so I tried to make my own implementation. This implementation uses ResizeSensor from css-element-queries

Installation

NPM

npm install --save react react-dom react-size-reporter

If you are using react v0.14 consider installing react-size-reporter@^1.0.5

Don't forget to manually install peer dependencies (react, react-dom) if you use npm@3.

Usage

import SizeReporter from 'react-size-reporter';

<SizeReporter onSizeChange={({height, width}) => console.log(height, width)}>
  <div>CONTENT GOES HERE</div>
  <div>AND HERE</div>
</SizeReporter>

Options

onSizeChange: PropTypes.func.isRequired

Callback called on mount and size changes

children: PropTypes.node.isRequired

Children with static or dynamic height or width

Pass-through props

You can pass any valid props, like style or className to SizeReporter, they will be applied to container

Public methods

reattachResizeListener

Use this if for any reason onSizeChange doesn't trigger anymore

reattach = () => this.sizeReporter.reattachResizeListener()

render(){
  return (
  <SizeReporter
    onSizeChange={({height, width}) => console.log(height, width)}
    ref={ref => ref ? this.sizeReporter = ref : null}
  >
    <div>CONTENT GOES HERE</div>
    <div>AND HERE</div>
    <button type='button' onClick={this.reattach}>Reattach!</button>
  </SizeReporter>
  )
}

Run

To run example, use npm start and then go to http://localhost:8080

License

MIT