Skip to content

useMutationObserver ​

Hook that gives you mutation observer state

browser
test coverage
Last changed: yesterday

Installation ​

Library
CLI
Manual
typescript
import { useMutationObserver } from '@siberiacancode/reactuse';

Usage ​

typescript
const { ref, observer, stop } = useMutationObserver(() => console.log('callback'))
// or
const { observer, stop } = useMutationObserver(ref, () => console.log('callback'))

Demo ​

Api ​

Parameters

NameTypeDefaultNote
callbackMutationCallback-The callback to execute when mutation is detected
options.enabled?booleantrueThe enabled state of the mutation observer
options.attributes?boolean-Set to true if mutations to target's attributes are to be observed
options.characterData?boolean-Set to true if mutations to target's data are to be observed
options.childList?boolean-Set to true if mutations to target's children are to be observed
options.subtree?boolean-Set to true if mutations to not just target, but also target's descendants are to be observed
options.characterDataOldValue?boolean-Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded
options.attributeOldValue?boolean-Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
options.attributeFilter?string[]-Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted

Returns

UseMutationObserverReturn & { ref: StateRef<Target> }

Parameters

NameTypeDefaultNote
targetHookTarget-The target element to observe
callbackMutationCallback-The callback to execute when mutation is detected
options.enabled?booleantrueThe enabled state of the mutation observer
options.attributes?boolean-Set to true if mutations to target's attributes are to be observed
options.characterData?boolean-Set to true if mutations to target's data are to be observed
options.childList?boolean-Set to true if mutations to target's children are to be observed
options.subtree?boolean-Set to true if mutations to not just target, but also target's descendants are to be observed
options.characterDataOldValue?boolean-Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded
options.attributeOldValue?boolean-Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
options.attributeFilter?string[]-Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted

Returns

UseMutationObserverReturn

Type declaration ​

typescript
import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export type UseMutationObserverTarget = HookTarget;

export interface UseMutationObserverReturn {
  /** The mutation observer instance */
  observer: MutationObserver;
  /** The mutation observer entries */
  stop: () => void;
}

export interface UseMutationObserverOptions extends MutationObserverInit {
  /** The enabled state of the mutation observer */
  enabled?: boolean;
}

export interface UseMutationObserver {
  (
    target: HookTarget,
    callback: MutationCallback,
    options?: UseMutationObserverOptions
  ): UseMutationObserverReturn;

  <Target extends Element>(
    callback: MutationCallback,
    options?: UseMutationObserverOptions,
    target?: never
  ): UseMutationObserverReturn & { ref: StateRef<Target> };
}

Source ​

Source • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.