useMutationObserver
A React Hook that use MutationObserver API with ease.
Demo
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>
