Skip to content
[UNMAINTAINED] React component-wrapper detecting height changes of its children
Branch: master
Clone or download
Latest commit 57116aa Sep 12, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example initial commit Jun 4, 2016
src additional height changes check Aug 19, 2016
.babelrc
.gitignore initial commit Jun 4, 2016
.npmignore add .npmignore Jun 5, 2016
LICENSE Create LICENSE Jun 5, 2016
README.md
package.json 1.0.7 Aug 19, 2016
webpack.config.js remove index.js Jun 5, 2016

README.md

Deprecation notice

This is unmaintained. Check out https://github.com/berrtech/react-size-reporter

react-height-reporter npm

React component-wrapper detecting height 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-height-reporter

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

Usage

import HeightReporter from 'react-height-reporter';

<HeightReporter onHeightChange={height => console.log(height)}>
  <div>CONTENT GOES HERE</div>
  <div>AND HERE</div>
</HeightReporter>

Options

onHeightChange: PropTypes.func.isRequired

Callback called on mount and height changes

children: PropTypes.node.isRequired

Children with static or dynamic height

Pass-through props

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

Run

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

License

MIT

You can’t perform that action at this time.