Package Exports
- react-height
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-height) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-height
Component-wrapper to determine and report children elements height
Installation
npm
npm install --save react-heightbower
bower install --save react-heightDemo
http://nkbt.github.io/react-height/example
Codepen demo
http://codepen.io/nkbt/pen/NGzgGb
Usage
<ReactHeight onHeightReady={height => console.log(height)}>
<div>Random content</div>
</ReactHeight>Options
onHeightReady: PropTypes.function.isRequired
Callback, invoked when height is measured (and when it is changed).
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">
</ReactHeight>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>
</ReactHeight>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'}}
className="myComponent">
<div>
Wrapper around this element will have red border, 200px width
and `class="myComponent"`
</div>
</ReactHeight>Development and testing
To run example covering ReactHeight features, use npm start, which will compile src/example/Example.js
git clone git@github.com:nkbt/react-height.git
cd react-height
npm install
npm start
# then
open http://localhost:8080License
MIT