useResizeObserver

v0.0.15testeddemo

Reports changes to the dimensions of an element via `ResizeObserver`. Accepts a single target or an array of (reactive) targets. The observer is recreated only when the resolved elements change, and can be paused/resumed.

Source Tests

Examples

useResizeObserver(el, ([entry]) => {
  console.log(entry.contentRect.width);
});

const { pause, resume } = useResizeObserver([el1, el2], (entries) => {
  // react to multiple targets
}, { box: 'border-box' });

Demo

Loading demo…

Signature

export function useResizeObserver(
  target: MaybeComputedElementRef | MaybeComputedElementRef[],
  callback: ResizeObserverCallback,
  options: UseResizeObserverOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`any`	—	Element(s) to observe
`callback`	`ResizeObserverCallback`	—	Invoked with the observer entries
`options`?	`UseResizeObserverOptions`	`{}`	Options

Returns

UseResizeObserverReturn`isSupported`, `isActive`, `pause`, `resume`, and `stop`