DOM element size sensor which will callback when the element size changed.

DOM 元素尺寸监听器，当元素尺寸变化的时候，将会触发回调函数！

• rc-size-sensor: React component wrapper.

npm i --save size-sensor

Then import it.

import { bind, clear } from 'size-sensor';

or import it by script in HTML, then get sizeSensor on window.

<script src="https://unpkg.com/size-sensor/dist/size-sensor.min.js"></script>

• bind & unbind

import { bind, clear } from 'size-sensor'; // bind the event on element, will get the `unbind` function const unbind1 = bind(document.querySelector('.container'), element => { // do what you want to to. }); const unbind2 = bind(document.querySelector('.container'), element => { // do what you want to to. }); // if you want to cancel bind event. unbind1();

• clear

import { bind, clear } from 'size-sensor'; /*  * // bind the resize event.  * const unbind1 = bind(...);  * const unbind2 = bind(...);  * ...  */ // you can cancel all the event of element. clear(element);

There is only 2 API:

• bind(element, callback)

Bind the resize trigger function on element. The function will return unbind function.

• clear(element)

Clear all the object and resize event on element.

The size sensor strategies include:

• ResizeObserver: use resizeObserver to observe element's size.
• object: use object document's resize event.

If ResizeObserver exists, use it, else use object as default.

Online demo click here. Used By:

• Ant Design Charts
• hustcc/echarts-for-react
• hustcc/canvas-nest.js

ISC@hustcc.