useMutationObserver

Hook that gives you mutation observer state

browser

test coverage

Last changed: 8 days ago

Installation

Library

CLI

Manual

import { useMutationObserver } from '@siberiacancode/reactuse';

Usage

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

Demo

source

Api

Parameters

Name	Type	Default	Note
callback	MutationCallback	-	The callback to execute when mutation is detected
options.enabled?	boolean	true	The 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

Name	Type	Default	Note
target	HookTarget	-	The target element to observe
callback	MutationCallback	-	The callback to execute when mutation is detected
options.enabled?	boolean	true	The 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

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