react-height 


Component-wrapper to determine and report children elements height

!React Height

Goals

- 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

Live design system demo

https://www.jinno.io/app/21/

Simple web demo

https://nkbt.github.io/react-height

Codepen demo

https://codepen.io/nkbt/pen/NGzgGb

Installation

$3

``sh
npm install --save react-height
`

$3

`sh
yarn add react-height
`

$3


`html


(Module exposed as ReactHeight)
`

Usage

`js
import {ReactHeight} from 'react-height';

console.log(height)}>

Random content

`

Options

$3

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

$3

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

$3

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

`js
console.log(height)}>


Paragraph of text

Another paragraph is also OK

Images and any other content are ok too

`

$3

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

`js




`

$3

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

`js
console.log(height)}
style={{width: 200, border: '1px solid red'}}
className="myComponent">



`

Development and testing

Currently is being developed and tested with the latest stable Node on OSX.

To run example covering all ReactHeight features, use yarn start, which will compile example/index.js

`bash
git clone git@github.com:nkbt/react-height.git
cd react-height
yarn install
yarn start

then


open http://localhost:8080
`

Tests

`bash


to run ESLint check

yarn lint

to run tests

yarn test
``

License

MIT