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!
A wrapper use pure component wrap stateless functional components to class use pure component to reduce re-render. read more
A polyfill for the resize observer api. read more
# use npm
$ npm install rc-target-size
# or yarn
$ yarn add rc-target-size
// unpkg
<script src="https://unpkg.com/rc-target-size/dist/rc-target-size.js"></script>
// jsdelivr
<script src="https://cdn.jsdelivr.net/npm/rc-target-size/dist/rc-target-size.js"></script>
Note use CDN in browser, you can call rcTargetSize
from Window API. it is available at window.rcTargetSize
import React from "react";
import { TargetSize } from "rc-target-size";
const ResizeOfMe = ({ width, height }) => (
<div>
component - size of me: {width}x{height}
</div>
);
const onSize = data => console.log("onSize", data);
const App = () => (
<div>
// simple
<TargetSize>
<ResizeOfMe />
</TargetSize>
// or use with config
<TargetSize mode="debounce" rate={1000} handleHeight onSize={onSize}>
<ResizeOfMe />
</TargetSize>
</div>
);
export default App;
import React from "react";
import { targetSize } from "rc-target-size";
const ResizeOfMeWrapped = ({ width, height }) => (
<div>
hoc - size of me: {width}x{height}
</div>
);
// 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 = () => (
<div>
<ResizeOfMe />
</div>
);
export default App;
import React from "react";
import { TargetSize } from "rc-target-size";
const onSize = data => console.log("onSize", data);
const App = () => (
<div>
// simple
<TargetSize>
{({ width, height }) => (
<div>
child function - size of me: {width}x{height}
</div>
)}
</TargetSize>
// or use with config
<TargetSize mode="debounce" rate={1000} handleHeight onSize={onSize}>
{({ width, height }) => (
<div>
child function - size of me: {width}x{height}
</div>
)}
</TargetSize>
</div>
);
export default App;
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 |
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 |