Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Component-wrapper to determine and report children elements height
https://github.com/nkbt/react-height

Last synced: 20 days ago
JSON representation

Component-wrapper to determine and report children elements height

Awesome Lists containing this project

README 

        
# 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

 console.log(height)}>

  
Will be removed from the DOM when height is measured



```



### 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 [email protected]: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