# size-sensor **Repository Path**: hustcc/size-sensor ## Basic Information - **Project Name**: size-sensor - **Description**: :herb: 1Kb DOM element size sensor which will callback when size changed. - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2019-11-26 - **Last Updated**: 2024-11-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # [size-sensor](https://git.hust.cc/size-sensor/) > DOM element size sensor which will callback when the element size changed. > > DOM 元素尺寸监听器,当元素尺寸变化的时候,将会触发回调函数! [![Build Status](https://github.com/hustcc/size-sensor/workflows/build/badge.svg)](https://github.com/hustcc/size-sensor/actions) [![npm](https://img.shields.io/npm/v/size-sensor.svg)](https://www.npmjs.com/package/size-sensor) [![npm](https://img.shields.io/npm/dm/size-sensor.svg)](https://www.npmjs.com/package/size-sensor) [![gzip](http://img.badgesize.io/https://unpkg.com/size-sensor/dist/size-sensor.min.js?compression=gzip)](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: - [antvis/G2Plot](https://github.com/antvis/G2Plot) - [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).