README.zh-CN.md

@rc-component/mutate-observer

_{Ant Design 生态的一部分。}

👁️ 轻量 React DOM 变更观察组件。

English | 简体中文

特性

• 用于观察渲染的 DOM 节点变化的组件和钩子 API。
• 将 MutationRecord[] 和本机 MutationObserver 实例传递给 onMutate。
• 支持完整的本机 MutationObserverInit 选项对象。
• 组件 props 和 hook 用法的 TypeScript 定义。
• 被 Ant Design 用作小型 DOM 观察原语。

安装

npm install @rc-component/mutate-observer

使用

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>;
};

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

MutateObserver

参数	类型	默认值	说明
children	React.ReactNode	-	要渲染和观察的节点。
options	MutationObserverInit	-	本机观察者选项，例如 attributes、childList 和 subtree。
onMutate	(mutations: MutationRecord[], observer: MutationObserver) => void	-	当报告观察到的突变时触发。

useMutateObserver

useMutateObserver(target, callback, options);

该 Hook 会用与组件相同的回调和原生 MutationObserverInit 配置监听目标元素或元素数组。

本地开发

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

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/mutate-observer 基于 MIT 许可证发布。