observeResize

The observeResize function lets you watch an element's size and run a callback when it changes.

This function uses the ResizeObserver API and follows a singleton pattern for better 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;
}