Use Mutation Observer - Mantine

import { UseMutationObserverDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useMutationObserver);

Usage

The use-mutation-observer hook is a wrapper for the MutationObserver. It allows you to subscribe to changes being made to the DOM tree.

Target element

If you cannot pass a ref to the target element, you can pass a function to resolve the target element as the third argument.

Definition

tsx

function useMutationObserver<T extends HTMLElement>(
  callback: MutationCallback,
  options: MutationObserverInit
): React.RefCallback<T | null>;

function useMutationObserverTarget(
  callback: MutationCallback,
  options: MutationObserverInit,
  target?: HTMLElement | (() => HTMLElement) | null
): void;