observeResize

The observeResize function allows you to monitor changes in an element's size and execute a callback when the size changes.

This function utilizes the ResizeObserver API and implements the singleton pattern for enhanced performance.

Usage

Import the function:

import { observeResize } from 'mdui/functions/observeResize.js';

Example:

// Listen for size changes on document.body
const observer = observeResize(document.body, function(entry, observer) {
  // At this point, document.body's size has changed. You can get the new size from entry.
  console.log(entry);

  // Call this method to stop observing
  observer.unobserve();
});

// You can also call the unobserve method on the function's return value to stop observing
observer.unobserve();

API

observeResize(target: string | HTMLElement | JQ<HTMLElement>, callback: Callback)): ObserveResize

The target parameter can be a CSS selector, a DOM element, or a JQ object.

Callback

(entry: ResizeObserverEntry, observer: ObserveResize) => void

In this function, this also refers to ObserveResize.

ObserveResize

{
  unobserve: () => void;
}