About
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
resize-observer-polyfill
A polyfill for the resize observer api. read more
Installation
# use npm $ npm install rc-target-size # or yarn $ yarn add rc-target-size
CDN
// unpkg // jsdelivr
Note use CDN in browser, you can call rcTargetSize
from Window API. it is available at window.rcTargetSize
Usage
Component render
;; const ResizeOfMe = <div> component - size of me: widthxheight </div>; const onSize = console; const App = <div> // simple <TargetSize> <ResizeOfMe /> </TargetSize> // or use with config <TargetSize mode="debounce" rate=1000 handleHeight onSize=onSize> <ResizeOfMe /> </TargetSize> </div>; ;
HOC render
;; const ResizeOfMeWrapped = <div> hoc - size of me: widthxheight </div>; // simpleconst ResizeOfMe = ResizeOfMeWrapped; // or use with configconst ResizeOfMe = ResizeOfMeWrapped; const App = <div> <ResizeOfMe /> </div>; ;
Child function
;; const onSize = console; const App = <div> // simple <TargetSize> <div> child } </TargetSize> // or use with config <TargetSize mode="debounce" rate=1000 handleHeight onSize=onSize> <div> child } </TargetSize> </div>; ;
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 |