useMutationObserver

v0.0.14testeddemo

Watch for changes to the DOM tree via MutationObserver. Accepts a single target, an array of targets, or a getter returning either.

Source Tests

Examples

useMutationObserver(el, (records) => {
  console.log(records);
}, { attributes: true });

const { pause, resume } = useMutationObserver([elA, elB], onMutate, { childList: true });

Demo

Loading demo…

Signature

export function useMutationObserver(
  target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>,
  callback: MutationCallback,
  options: UseMutationObserverOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef \| MaybeComputedElementRef[] \| MaybeRefOrGetter<MaybeElement[]>`	—	Element(s) to observe
`callback`	`MutationCallback`	—	Invoked with the mutation records
`options`?	`UseMutationObserverOptions`	`{}`	Observer options (childList, attributes, …)

Returns

UseMutationObserverReturnisSupported, isActive, pause, resume, stop, and takeRecords

Property	Type	Default	Description
`isSupported`	`Readonly<Ref<boolean>>`	—	—
`isActive`	`Readonly<Ref<boolean>>`	—	Whether the observer is currently active (not paused or stopped)
`pause`	`() => void`	—	Temporarily disconnect the observer without tearing down the watcher. Re-observe with `resume`.
`resume`	`() => void`	—	Re-attach the observer to the current target(s) after a `pause`.
`stop`	`() => void`	—	Permanently stop observing and dispose the watcher.
`takeRecords`	`() => MutationRecord[] \| undefined`	—	Synchronously take and clear the observer's record queue