https://github.com/lh0x00/rc-target-size
a tool help get size and offset of element for React, support higher-order component and component render.
https://github.com/lh0x00/rc-target-size
dom element height polyfill props react resize size style target width
Last synced: about 1 year ago
JSON representation
a tool help get size and offset of element for React, support higher-order component and component render.
- Host: GitHub
- URL: https://github.com/lh0x00/rc-target-size
- Owner: lh0x00
- License: mit
- Created: 2018-06-16T09:08:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-07-13T22:06:24.000Z (almost 6 years ago)
- Last Synced: 2025-03-18T12:58:26.011Z (about 1 year ago)
- Topics: dom, element, height, polyfill, props, react, resize, size, style, target, width
- Language: JavaScript
- Homepage: https://codesandbox.io/s/1yrwq9wm54
- Size: 69.3 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# About
[![npm version][npm-version-image]][npm-url]
[![npm downloads][npm-downloads-image]][npm-url]
[![github issues][github-issues-image]][github-issues-url]
[![build status][travis-image]][travis-url]
A tool help get size of element for React, support higher-order component and component render.
You can get the size of the element using a row without changing any of the elements!
## Reference
### rc-pure-component
A wrapper use pure component wrap stateless functional components to class use pure component to reduce re-render. [read more](https://www.npmjs.com/package/rc-pure-component)
### resize-observer-polyfill
A polyfill for the resize observer api. [read more](https://www.npmjs.com/package/resize-observer-polyfill)
# Installation
```bash
# use npm
$ npm install rc-target-size
# or yarn
$ yarn add rc-target-size
```
## CDN
```html
// unpkg
// jsdelivr
```
**Note** use CDN in browser, you can call `rcTargetSize` from Window API. it is available at `window.rcTargetSize`
# Usage
## Component render
[read more](https://github.com/lamhieu-vk/rc-target-size/blob/master/examples/component.js)
```javascript
import React from "react";
import { TargetSize } from "rc-target-size";
const ResizeOfMe = ({ width, height }) => (
component - size of me: {width}x{height}
);
const onSize = data => console.log("onSize", data);
const App = () => (
// simple
// or use with config
);
export default App;
```
## HOC render
[read more](https://github.com/lamhieu-vk/rc-target-size/blob/master/examples/hoc.js)
```javascript
import React from "react";
import { targetSize } from "rc-target-size";
const ResizeOfMeWrapped = ({ width, height }) => (
hoc - size of me: {width}x{height}
);
// simple
const ResizeOfMe = targetSize()(ResizeOfMeWrapped);
// or use with config
const ResizeOfMe = targetSize({
mode: "debounce",
rate: 1000,
handleWidth: true,
onSize: data => console.log("onSize", data),
})(ResizeOfMeWrapped);
const App = () => (
);
export default App;
```
## Child function
[read more](https://github.com/lamhieu-vk/rc-target-size/blob/master/examples/childFunction.js)
```javascript
import React from "react";
import { TargetSize } from "rc-target-size";
const onSize = data => console.log("onSize", data);
const App = () => (
// simple
{({ width, height }) => (
child function - size of me: {width}x{height}
)}
// or use with config
{({ width, height }) => (
child function - size of me: {width}x{height}
)}
);
export default App;
```
# Documents
## Config
| name | type | description |
| -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
| mode | String | (optional) values is 'debounce' or 'throttle', mode refresh size of component when resize. default: 'throttle' |
| rate | Number | (optional) rate refresh size of component when resize, measurement is milliseconds. default: 500 |
| querySelector | String | (optional) if you do not want to get the size of the current element, you can take another element. default: undefined |
| handleWidth | Boolean | (optional) only update value when width resized. default: false |
| handleHeight | Boolean | (optional) only update value when height resized. default: false |
| handleOffset | Boolean | (optional) only update value when offset changed. default: false |
| updateOnChange | Boolean | (optional) will received values since the initial creation? default: true |
| onSize | Func | (optional) function callback on have size. default: undefined |
## Props
values return to your components, append to props
| name | type | description |
| --------- | ------- | ------------------------------------------ |
| width | Number | width of element. default: 0 |
| height | Number | height of element. default: 0 |
| offset | Object | offset of element. default: { x: 0, y: 0 } |
| canUseDOM | Boolean | the test was able to use DOM or not |
[npm-url]: https://npmjs.org/package/rc-target-size
[npm-version-image]: https://badge.fury.io/js/rc-target-size.svg
[npm-downloads-image]: https://img.shields.io/npm/dm/rc-target-size.svg
[github-issues-image]: https://img.shields.io/github/issues/lamhieu-vk/rc-target-size.svg
[github-issues-url]: https://github.com/lamhieu-vk/rc-target-size/issues
[travis-image]: https://travis-ci.com/lamhieu-vk/rc-target-size.svg?branch=master
[travis-url]: https://travis-ci.com/lamhieu-vk/rc-target-size?branch=master