useMutationObserver

A React Hook that use MutationObserver API with ease.

Demo

Source
Supported:
false

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const { observerRef, isSupported, ...controls } = useMutationObserver(elementTarget, callback, options)

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

Callback

MutationCallback, A function that will be called when the mutation occurs.

type MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => void

Options

export interface UseWebObserverOptions { /** * Start the observer immediate after calling this function * * @defaultValue true */ immediate?: boolean } type MutationObserverInit = { childList?: boolean attributes?: boolean characterData?: boolean subtree?: boolean attributeOldValue?: boolean characterDataOldValue?: boolean attributeFilter?: string[] } export interface UseMutationObserverOptions extends UseWebObserverOptions, MutationObserverInit {}

Returns

Retuerns contain Pausable instance that can be paused, resumed.

See Pausable for more details.

export type UseWebObserverReturns<Observer> = Pausable & { /** * ref that holds the observer instance */ observerRef: React.MutableRefObject<Observer | null> /** * Check if the observer is supported in the current environment */ isSupported: boolean } export type UseMutationObserverReturns = UseWebObserverReturns<MutationObserver>