DOM element size sensor which will callback when size changed.
npm install size-sensor> 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.
``js`
import { bind, clear } from 'size-sensor';
or import it by script in HTML, then get sizeSensor on window.
`html`
- bind & unbind
`js
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
`js
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.