react-height

Component-wrapper to determine and report children elements height

  • 所有者: nkbt/react-height
  • 平台:
  • 許可證: MIT License
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

react-height npm

CircleCI
Dependencies
Dev Dependencies

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

React Height

Demo

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

Codepen demo

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

Installation

NPM

npm install --save react-height

yarn

yarn add react-height 

1998 Script Tag:

<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

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.

<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

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

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

# then
open http://localhost:8080

Tests

# to run ESLint check
yarn lint

# to run tests
yarn test

License

MIT

主要指標

概覽
名稱與所有者nkbt/react-height
主編程語言JavaScript
編程語言JavaScript (語言數: 2)
平台
許可證MIT License
所有者活动
創建於2015-10-30 09:47:26
推送於2025-02-27 12:16:06
最后一次提交2025-02-27 20:16:05
發布數16
最新版本名稱v3.0.2 (發布於 2021-08-17 23:49:47)
第一版名稱v1.0.0 (發布於 )
用户参与
星數182
關注者數5
派生數27
提交數427
已啟用問題?
問題數20
打開的問題數2
拉請求數22
打開的拉請求數0
關閉的拉請求數25
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?