Skip to content

useMutationObserver ​

Hook that gives you mutation observer state

sensors
low
test coverage
Last changed: 2 days ago

Installation ​

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

Usage ​

typescript
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 ​

Api ​

Parameters

NameTypeDefaultNote
targetHookTarget-The target element to observe
options.enabled?booleantrueThe 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

NameTypeDefaultNote
options.enabled?booleantrueThe 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

NameTypeDefaultNote
callbackUseMutationObserverCallback-The callback to execute when mutation is detected

Returns

UseMutationObserverReturn & { ref: StateRef<Target> }

Parameters

NameTypeDefaultNote
callbackUseMutationObserverCallback-The callback to execute when mutation is detected
targetHookTarget-The target element to observe

Returns

UseMutationObserverReturn

Type declaration ​

typescript
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
debabin

Released under the MIT License.