didResize

The didResize modifier triggers a callback when resize events are observed on the target element.

Signature

interface DidResizeSignature {
  Args: {
    Positional: [handler: DidResizeHandler, options?: ResizeObserverOptions];
  };
  Element: Element;
}

type DidResizeHandler = (
  entry: ResizeObserverEntry,
  observer: ResizeObserver,
) => void;

Arguments

Argument	Type	Required	Description
handler	(entry: ResizeObserverEntry, observer: ResizeObserver) => void	Yes	Callback invoked on resize
options	ResizeObserverOptions	No	Options passed to ResizeObserver.observe()

Handler Parameters

Parameter	Type	Description
entry	ResizeObserverEntry	Contains the new dimensions of the observed element
observer	ResizeObserver	The ResizeObserver instance

ResizeObserverOptions

Option	Type	Default	Description
box	'content-box' | 'border-box' | 'device-pixel-content-box'	'content-box'	Which box model to observe

Implementation Details

• Uses a single shared ResizeObserver instance across all uses of the modifier for optimal performance.
• Handlers are stored in a WeakMap keyed by the observed element.
• Resize callbacks are batched via requestAnimationFrame.
• Automatically cleans up (unobserves) when the element is destroyed or when arguments change.
• Becomes a no-op in browsers that don't support ResizeObserver.

Importing

// Default export (modifier class)
import DidResizeModifier from 'ember-resize-modifier/modifiers/did-resize';

// Named export
import { didResize } from 'ember-resize-modifier';

Example