Component-wrapper to determine and report children elements height
Branch: master
Clone or download
Latest commit 45018e4 Apr 8, 2018

react-height npm


CircleCI AppVeyor Coverage Dependencies Dev Dependencies

Component-wrapper to determine and report children elements height


  • react-height keeps things simple, therefore it does not support nested height change, it only checks immediate children change
  • not based on specific browser APIs, so can be used in other environments too
  • used as backend for react-collapse

React Height



npm install --save react react-height

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

1998 Script Tag:

<script src=""></script>
<script src=""></script>
(Module exposed as `ReactHeight`)


Codepen demo


import {ReactHeight} from 'react-height';

<ReactHeight onHeightReady={height => console.log(height)}>
  <div>Random content</div>


onHeightReady: PropTypes.func.isRequired

Callback, invoked when height is measured (and when it is changed).

getElementHeight: PropTypes.func

Function to measure your element. It receives the element as argument and defaults to el => el.clientHeight.

children: PropTypes.node.isRequired

One or multiple children with static, variable or dynamic height.

<ReactHeight onHeightReady={height => console.log(height)}>
  <p>Paragraph of text</p>
  <p>Another paragraph is also OK</p>
  <p>Images and any other content are ok too</p>
  <img src="nyancat.gif" />

hidden: PropTypes.bool (default: false)

ReactHeight can render to null as soon as height is measured.

<ReactHeight hidden={true} onHeightReady={height => console.log(height)}>
  <div>Will be removed from the DOM when height is measured</div>

Pass-through props

All other props are applied to a container that is being measured. So it is possible to pass style or className, for example.

<ReactHeight onHeightReady={height => console.log(height)}
  style={{width: 200, border: '1px solid red'}}

    Wrapper around this element will have red border, 200px width
    and `class="myComponent"`

Development and testing

Currently is being developed and tested with the latest stable Node 7 on OSX and Windows. Should be ok with Node 6, but not guaranteed.

To run example covering all ReactHeight features, use npm start, which will compile src/example/Example.js

git clone
cd react-height
npm install
npm start

# then
open http://localhost:8080


npm test

# to run tests in watch mode for development
npm run test:dev

# to generate test coverage (./reports/coverage)
npm run test:cov