useMutationObserver

Hook that gives you mutation observer state

sensors

low

test coverage

Last changed: 2 months ago

TIP

This hook uses MutationObserver browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

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

Usage

const { observer, stop } = useMutationObserver(ref, { childList: true });
// or
const { ref, observer, stop } = useMutationObserver({ childList: true });
// or
const { ref, observer, stop } = useMutationObserver((mutations) => console.log(mutations));
// or
const { observer, stop } = useMutationObserver((mutations) => console.log(mutations), ref);

Demo

source

Api

Parameters

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

Returns

UseMutationObserverReturn

Parameters

Name	Type	Default	Note
options.enabled?	boolean	true	The enabled state of the mutation observer
options.onChange?	UseMutationObserverCallback	-	The callback to execute when mutation is detected
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

Returns

UseMutationObserverReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
callback	UseMutationObserverCallback	-	The callback to execute when mutation is detected

Returns

UseMutationObserverReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
callback	UseMutationObserverCallback	-	The callback to execute when mutation is detected
target	HookTarget	-	The target element to observe

Returns

UseMutationObserverReturn

Type declaration

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

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

export type UseMutationObserverCallback = (
  mutations: MutationRecord[],
  observer: MutationObserver
) => void;

export interface UseMutationObserverOptions extends MutationObserverInit {
  /** The enabled state of the mutation observer */
  enabled?: boolean;
  /** The callback to execute when mutation is detected */
  onChange?: UseMutationObserverCallback;
}

export interface UseMutationObserverReturn {
  /** The mutation observer instance */
  observer?: MutationObserver;
}

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

  (target: HookTarget, options?: UseMutationObserverOptions): UseMutationObserverReturn;

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

  (target: HookTarget, callback: UseMutationObserverCallback): UseMutationObserverReturn;
}

Source

Source • Demo

Contributors

D

debabin