Function onResize

Adds resize event listeners to either an element (using ResizeObserver) or the viewport (using custom resize events). It handles debouncing and allows the removal of listeners when no longer needed. If both element and hasBothEvents are provided, both ResizeObserver and viewport resize events will be used.

Example

const handler = onResize({
  onResize: () => console.log('resize'),
  element: document.getElementById('app')!,
  viewportTarget: 'any',
  hasBothEvents: true,   // Trace both element and viewport sizes
  resizeDebounce: 100,
});

// Trigger resize with debounce
handler.debounceResize();
handler.debounceResize();

// Trigger resize without debounce
handler.resize();

// Remove listeners
handler.remove();
Copy