element-resize-detector

What is element-resize-detector?

The element-resize-detector npm package is a utility for detecting changes in the size of HTML elements. It provides a way to listen for resize events on any DOM element, which can be useful for responsive design, dynamic content adjustments, and more.

What are element-resize-detector's main functionalities?

Basic Resize Detection

This feature allows you to listen for resize events on a specific DOM element. When the element is resized, the provided callback function is executed.

const elementResizeDetectorMaker = require('element-resize-detector');
const erd = elementResizeDetectorMaker();

const element = document.getElementById('myElement');
erd.listenTo(element, function(element) {
  console.log('Element resized:', element);
});

Unlisten to Resize Events

This feature allows you to stop listening to resize events on a specific DOM element. This can be useful for cleanup or when the resize detection is no longer needed.

const elementResizeDetectorMaker = require('element-resize-detector');
const erd = elementResizeDetectorMaker();

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

function onResize(element) {
  console.log('Element resized:', element);
}

erd.listenTo(element, onResize);

// Later, if you want to stop listening to resize events
erd.uninstall(element);

Batch Listening

This feature allows you to listen for resize events on multiple elements at once. The provided callback function is executed whenever any of the elements are resized.

const elementResizeDetectorMaker = require('element-resize-detector');
const erd = elementResizeDetectorMaker();

const elements = document.querySelectorAll('.resize-listen');

function onResize(element) {
  console.log('Element resized:', element);
}

elements.forEach(element => erd.listenTo(element, onResize));

Other packages similar to element-resize-detector

resize-observer-polyfill

The resize-observer-polyfill package provides a polyfill for the ResizeObserver API, which is a native browser API for observing changes to the size of an element. It offers similar functionality to element-resize-detector but leverages the native API when available, providing a more standardized approach.

react-resize-detector

The react-resize-detector package is a React-specific utility for detecting element resize events. It provides a higher-order component and hooks for integrating resize detection into React applications, making it a more seamless choice for React developers compared to element-resize-detector.

vue-resize

The vue-resize package is a Vue.js directive for detecting element resize events. It is tailored for Vue.js applications, providing a more idiomatic way to handle resize detection in Vue components compared to element-resize-detector.

README

element-resize-detector

resize event emitter for elements.