observeResize

A função observeResize é usada para monitorar as mudanças de tamanho de um elemento. Quando o tamanho muda, a função de retorno especificada é executada.

Esta função é implementada usando ResizeObserver, mas utiliza um padrão singleton, portanto tem melhor desempenho.

Como usar

Importe a função conforme necessário:

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

Exemplo de uso:

// monitorar as mudanças de tamanho do document.body
const observer = observeResize(document.body, function (entry, observer) {
  // Neste momento, o tamanho do document.body mudou; você pode obter o novo tamanho pelo entry
  console.log(entry);

  // Você pode chamar este método para cancelar a monitorar
  observer.unobserve();
});

// Você também pode chamar o método unobserve do valor retornado pela função para cancelar a monitorar
observer.unobserve();

API

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

O parâmetro target pode ser um seletor CSS, um elemento DOM ou um objeto JQ.

Callback

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

Na função de retorno, this aponta para ObserveResize.

ObserveResize

{
  unobserve: () => void;
}