# size-sensor

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

Latest version **1.0.3** (published 2026-01-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install size-sensor
pnpm add size-sensor
yarn add size-sensor
bun add size-sensor
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2026-01-16 |
| First published | 2018-06-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 168 |
| Author | hustcc |
| Maintainers | atool |
| Keywords | resize, size, sensor, size-detector, element |

## Links

- npm: https://www.npmjs.com/package/size-sensor
- Repository: https://github.com/hustcc/size-sensor
- Homepage: https://git.hust.cc/size-sensor
- Issues: https://github.com/hustcc/size-sensor/issues
- npm.io page: https://npm.io/package/size-sensor

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2026-01-16
- 1.0.4 — 2026-05-19
- 1.0.2 — 2023-08-30
- 1.0.1 — 2020-05-19
- 1.0.0 — 2020-03-14
- 0.2.6 — 2019-11-12
- 0.2.5 — 2019-06-17
- 0.2.4 — 2019-04-24
- 0.2.3 — 2019-04-19
- 0.2.2 — 2018-10-07
- 0.2.2-beta.1 — 2018-09-30
- 0.2.1 — 2018-08-29
- 0.2.0 — 2018-07-06
- 0.1.0 — 2018-06-27
- 0.0.4 — 2018-06-22
- … 2 more at https://npm.io/package/size-sensor/versions

## 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
<script src="https://unpkg.com/size-sensor/dist/size-sensor.min.js"></script>
```



## 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).

---
_Source: https://npm.io/package/size-sensor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._