@rc-component/mutate-observer

_{Part of the Ant Design ecosystem.}

👁️ React wrapper and hook for observing DOM mutations with a typed MutationObserver API.

English | 简体中文

Highlights

• Component and hook APIs for observing changes to a rendered DOM node.
• Passes MutationRecord[] and the native MutationObserver instance to onMutate.
• Supports the full native MutationObserverInit options object.
• TypeScript definitions for component props and hook usage.
• Used by Ant Design as a small DOM observation primitive.

Install

npm install @rc-component/mutate-observer

Usage

import MutateObserver from '@rc-component/mutate-observer';
export default () => (
  <MutateObserver
    options={{ attributes: true, childList: true, subtree: true }}
    onMutate={(mutations, observer) => {
      console.log(mutations);
      console.log(observer);
    }}
  >
    <div>Observed content</div>
  </MutateObserver>
);

import { useMutateObserver } from '@rc-component/mutate-observer';

export default ({ target }: { target: HTMLDivElement | null }) => {
  useMutateObserver(target, mutations => {
    console.log(mutations);
  });

  return <div>Observed content</div>;
};

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

MutateObserver

Property	Type	Default	Description
children	React.ReactNode	-	Node to render and observe.
options	MutationObserverInit	-	Native observer options such as attributes, childList, and subtree.
onMutate	(mutations: MutationRecord[], observer: MutationObserver) => void	-	Triggered when observed mutations are reported.

useMutateObserver

useMutateObserver(target, callback, options);

The hook observes the provided target element or element array with the same callback and native MutationObserverInit options used by the component.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/mutate-observer is released under the MIT license.