# react-height

> Component-wrapper to determine and report children elements height

Latest version **3.0.2** (published 2021-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-height
pnpm add react-height
yarn add react-height
bun add react-height
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2021-08-17 |
| First published | 2015-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 34.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 181 |
| Author | Nik Butenko |
| Maintainers | nkbt |
| Keywords | component, react-component, react, height, height-reporter |

## Links

- npm: https://www.npmjs.com/package/react-height
- Repository: https://github.com/nkbt/react-height
- Issues: https://github.com/nkbt/react-height/issues
- npm.io page: https://npm.io/package/react-height

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2021-08-17
- 3.0.1 — 2019-11-08
- 3.0.0 — 2017-04-20
- 2.2.1 — 2017-04-17
- 2.2.0 — 2017-01-17
- 2.1.1 — 2016-07-05
- 2.1.0 — 2016-04-10
- 2.0.4 — 2016-02-06
- 2.0.3 — 2016-01-17
- 2.0.2 — 2016-01-09
- 2.0.1 — 2016-01-09
- 2.0.0 — 2016-01-09
- 1.1.0 — 2015-11-04
- 1.0.2 — 2015-11-02
- 1.0.1 — 2015-10-30
- … 1 more at https://npm.io/package/react-height/versions

## 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
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-height/build/react-height.js"></script>
(Module exposed as `ReactHeight`)
```


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

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

## 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
<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.

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

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

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

---
_Source: https://npm.io/package/react-height · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._