observeResize

La función observeResize está diseñada para observar los cambios de tamaño de un elemento. Cuando cambia el tamaño, se ejecuta la función de devolución de llamada especificada.

Esta función se implementa usando ResizeObserver, pero utiliza un patrón singleton, por lo que tiene un mejor rendimiento.

Uso

Importa la función cuando lo necesites:

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

Uso:

// Observa los cambios de tamaño de document.body
const observer = observeResize(document.body, function (entry, observer) {
  // En este punto, el tamaño de document.body ha cambiado. Puedes obtener el nuevo tamaño mediante entry
  console.log(entry);

  // Puedes llamar a este método para cancelar la observación
  observer.unobserve();
});

// También puedes llamar al método unobserve del valor de retorno de la función para cancelar la observación
observer.unobserve();

API

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

El parámetro target puede ser un selector CSS, un elemento DOM o un objeto JQ.

Callback

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

Dentro de la función de devolución de llamada, this apunta a ObserveResize.

ObserveResize

{
  unobserve: () => void;
}