https://github.com/hustcc/size-sensor
:herb: 1Kb DOM element size sensor which will callback when size changed.
https://github.com/hustcc/size-sensor
element-resize-event resize resize-observer sensor size-sensor
Last synced: 2 months ago
JSON representation
:herb: 1Kb DOM element size sensor which will callback when size changed.
- Host: GitHub
- URL: https://github.com/hustcc/size-sensor
- Owner: hustcc
- Created: 2018-06-06T01:52:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-04T05:36:59.000Z (about 1 year ago)
- Last Synced: 2025-04-08T15:46:32.002Z (3 months ago)
- Topics: element-resize-event, resize, resize-observer, sensor, size-sensor
- Language: JavaScript
- Homepage: https://git.hust.cc/size-sensor
- Size: 53.7 KB
- Stars: 164
- Watchers: 6
- Forks: 23
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [size-sensor](https://git.hust.cc/size-sensor/)
> DOM element size sensor which will callback when the element size changed.
>
> DOM 元素尺寸监听器，当元素尺寸变化的时候，将会触发回调函数！
[](https://github.com/hustcc/size-sensor/actions)
[](https://www.npmjs.com/package/size-sensor)
[](https://www.npmjs.com/package/size-sensor)
[](https://unpkg.com/size-sensor/dist/size-sensor.min.js)
- [rc-size-sensor](https://www.npmjs.com/package/rc-size-sensor): React component wrapper.
## Install
> 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
```
## Usage
- **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);
```
## API
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.
## Strategies
The size sensor strategies include:
- `ResizeObserver`: use [resizeObserver](src/sensors/resizeObserver.js) to observe element's size.
- `object`: use [object](src/sensors/object.js) document's resize event.
If `ResizeObserver` exists, use it, else use `object` as default.
## Let me know
Online demo click [here](https://git.hust.cc/size-sensor). Used By:
- [Ant Design Charts](https://github.com/ant-design/ant-design-charts)
- [hustcc/echarts-for-react](https://github.com/hustcc/echarts-for-react)
- [hustcc/canvas-nest.js](https://github.com/hustcc/canvas-nest.js)
# License
ISC@[hustcc](https://github.com/hustcc).