npmpackage.info

Gathering detailed insights and metrics for size-sensor

Other packages similar to size-sensor

rc-size-sensor

0.1.2

React component for size-sensor.

resize-sensor

0.0.6

Element Sensor is a purely event based element size changing detector, which means intermitten checking free.

@heartlee/size-sensor

0.1.0

Forked from size-sensor.For learning only

react-size-sensor

0.2.2

Component with onSize and onResize events.

Gathering detailed insights and metrics for size-sensor

size-sensor - 1.0.2 | npmpackage.info

size-sensor

🌿 1Kb DOM element size sensor which will callback when size changed.

1.0.2

166

JavaScript

1.17 kB

54,560,599 3.2

Installations

npm install size-sensor

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.9.1

NPM Version

8.19.1 Score

99.6

Supply Chain

100

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

9

Closed

1

Merged

8

Issues

Open

1

Total

10

Closed

9

Releases

v1.0.2

Updated on Aug 30, 2023

v1.0.1

Updated on May 19, 2020

v1.0.0

Updated on Mar 19, 2020

View All 3 releases

Languages

JavaScript

HTML

JavaScript (71.9%)

HTML (28.1%)

Developer

hustcc

Download Statistics

Total Downloads

54,560,599

Last Day

18,847

Last Week

373,938

Last Month

1,633,154

Last Year

17,748,743

GitHub Statistics

166 Stars

55 Commits

23 Forks

6 Watchers

1 Branches

7 Contributors

Updated on Jun 19, 2025

Bundle Size

3.56 kB

Minified

1.17 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

1.0.2

Package Id

size-sensor@1.0.2

Unpacked Size

16.33 kB

Size

5.14 kB

File Count

NPM Version

8.19.1

Node Version

18.9.1

Published on

Aug 30, 2023

Total Downloads

Cumulative downloads

Total Downloads

54,560,599

Last Day

-0.1%

18,847

Compared to previous day

Last Week

-5.3%

373,938

Compared to previous week

Last Month

-0.8%

1,633,154

Compared to previous month

Last Year

10.4%

17,748,743

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@babel/cli @babel/core @babel/preset-env babel-jest babel-plugin-version cross-env jest jest-electron limit-size rimraf rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-uglify

size-sensor

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

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

rc-size-sensor: React component wrapper.

Install

npm i --save size-sensor

Then import it.

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

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

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

Usage

bind & unbind

1import { bind, clear } from 'size-sensor';
2
3// bind the event on element, will get the `unbind` function
4const unbind1 = bind(document.querySelector('.container'), element => {
5  // do what you want to to.
6});
7
8const unbind2 = bind(document.querySelector('.container'), element => {
9  // do what you want to to.
10});
11
12// if you want to cancel bind event.
13unbind1();

clear

1import { bind, clear } from 'size-sensor';
2
3/*
4 * // bind the resize event.
5 * const unbind1 = bind(...);
6 * const unbind2 = bind(...);
7 * ...
8 */
9
10// you can cancel all the event of element.
11clear(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 to observe element's size.
object: use object document's resize event.

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

Let me know

Online demo click here. Used By:

License

ISC@hustcc.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.2

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More