# react-height [![npm](https://img.shields.io/npm/v/react-height.svg?style=flat-square)](https://www.npmjs.com/package/react-height) [![CircleCI](https://img.shields.io/circleci/project/nkbt/react-height.svg?style=flat-square&label=build)](https://circleci.com/gh/nkbt/react-height) [![Dependencies](https://img.shields.io/david/nkbt/react-height.svg?style=flat-square)](https://david-dm.org/nkbt/react-height) [![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-height.svg?style=flat-square)](https://david-dm.org/nkbt/react-height#info=devDependencies) Component-wrapper to determine and report children elements height ![React Height](./example/react-height.gif) ## 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/](https://www.jinno.io/app/21/?source=react-height) ## Simple web demo [https://nkbt.github.io/react-height](https://nkbt.github.io/react-height) ## Codepen demo [https://codepen.io/nkbt/pen/NGzgGb](https://codepen.io/nkbt/pen/NGzgGb?editors=101) ## Installation ### NPM ```sh npm install --save react-height ``` ### yarn ```sh yarn add react-height ``` ### 1998 Script Tag: ```html (Module exposed as `ReactHeight`) ``` ## Usage ```js import {ReactHeight} from 'react-height'; console.log(height)}>

Random content

``` ## Options ### `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. ```js console.log(height)}>

Paragraph of text

Another paragraph is also OK

Images and any other content are ok too

``` ### `hidden`: PropTypes.bool (default: false) ReactHeight can render to null as soon as height is measured. ```js ``` ### 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. ```js console.log(height)} style={{width: 200, border: '1px solid red'}} className="myComponent">

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` 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

react-height

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past