useResizeObserver

v0.0.14testeddemo

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`	`MaybeComputedElementRef \| MaybeComputedElementRef[]`	—	Element(s) to observe
`callback`	`ResizeObserverCallback`	—	Invoked with the observer entries
`options`?	`UseResizeObserverOptions`	`{}`	Options

Returns

UseResizeObserverReturnisSupported, isActive, pause, resume, and stop

Property	Type	Default	Description
`isSupported`	`Readonly<Ref<boolean>>`	—	Whether `ResizeObserver` is supported in the current environment
`isActive`	`Readonly<Ref<boolean>>`	—	Whether the observer is currently active
`pause`	`() => void`	—	Temporarily stop observing (disconnects the observer) while keeping the target watcher alive, so observing can be resumed later
`resume`	`() => void`	—	Resume observing after a `pause`
`stop`	`() => void`	—	Permanently stop observing and tear down the target watcher