size-sensor

What is size-sensor?

The size-sensor npm package is used to detect changes in the size of an HTML element. It can be useful for responsive design, dynamic content adjustments, and other scenarios where you need to react to changes in element dimensions.

What are size-sensor's main functionalities?

Detecting size changes

This feature allows you to bind a callback function to an HTML element that will be called whenever the size of the element changes.

const { bind, clear } = require('size-sensor');

const element = document.getElementById('myElement');

bind(element, () => {
  console.log('Element size changed!');
});

Unbinding size change detection

This feature allows you to unbind the size change detection from an HTML element, stopping the callback from being called when the element's size changes.

const { bind, clear } = require('size-sensor');

const element = document.getElementById('myElement');

const sensor = bind(element, () => {
  console.log('Element size changed!');
});

// Later, if you want to stop detecting size changes
clear(sensor);

Other packages similar to size-sensor

resize-observer-polyfill

The resize-observer-polyfill package provides a polyfill for the ResizeObserver API, which is a native browser API for detecting changes to the size of an element. It offers similar functionality to size-sensor but is based on a standard API that is becoming widely supported in modern browsers.

element-resize-detector

The element-resize-detector package is another library for detecting changes in the size of an HTML element. It offers more customization options and different strategies for detecting size changes, such as object-based and scroll-based detection.

README

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.

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

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

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

Usage

• bind & unbind

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

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 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:

• antvis/G2Plot
• hustcc/echarts-for-react
• hustcc/canvas-nest.js

License

ISC@hustcc.