useMutationObserver
一个方便使用 MutationObserver API 的 React 钩子。
演示
用法
请查看 API。
源码
API
const { observerRef, isSupported, ...controls } = useMutationObserver(elementTarget, callback, options)
元素目标 ElementTarget
ElementTarget 是一个联合类型，代表可以被定位的各种元素。
更多详情，请参见 ElementTarget 或 ElementTarget 类型。
回调 Callback
MutationCallback，当变化发生时将被调用的函数。
type MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => void
选项 Options
export interface UseWebObserverOptions {
/**
* 调用此函数后立即开始观察
*
* @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 {}
返回值
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export type UseWebObserverReturns<Observer> = Pausable & {
/**
* 持有观察者实例的 ref
*/
observerRef: React.MutableRefObject<Observer | null>
/**
* 检查当前环境中是否支持观察者
*/
isSupported: boolean
}
export type UseMutationObserverReturns = UseWebObserverReturns<MutationObserver>
