useMutationObserver

v0.0.15testeddemo

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`	`any`	—	Element(s) to observe
`callback`	`MutationCallback`	—	Invoked with the mutation records
`options`?	`UseMutationObserverOptions`	`{}`	Observer options (childList, attributes, …)

Returns

UseMutationObserverReturn`isSupported`, `isActive`, `pause`, `resume`, `stop`, and `takeRecords`