|
| 1 | +<div align="center"> |
| 2 | + <h1>@rc-component/mutate-observer</h1> |
| 3 | + <p><sub>Ant Design 生态的一部分。</sub></p> |
| 4 | + <img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" /> |
| 5 | + <p>👁️ 轻量 React DOM 变更观察组件。</p> |
| 6 | +</div> |
| 7 | + |
| 8 | +<p align="center"><a href="./README.md">English</a> | 简体中文</p> |
| 9 | + |
| 10 | + |
| 11 | +<div align="center"> |
| 12 | + |
| 13 | +[![NPM version][npm-image]][npm-url] |
| 14 | +[![npm download][download-image]][download-url] |
| 15 | +[![build status][github-actions-image]][github-actions-url] |
| 16 | +[![Codecov][codecov-image]][codecov-url] |
| 17 | +[![bundle size][bundlephobia-image]][bundlephobia-url] |
| 18 | +[![dumi][dumi-image]][dumi-url] |
| 19 | + |
| 20 | +</div> |
| 21 | + |
| 22 | + |
| 23 | +## 特性 |
| 24 | + |
| 25 | +- Component and hook APIs for observing changes to a rendered DOM node. |
| 26 | +- Passes `MutationRecord[]` and the native `MutationObserver` instance to `onMutate`. |
| 27 | +- 支持 the full native `MutationObserverInit` options object. |
| 28 | +- TypeScript definitions for component props and hook usage. |
| 29 | +- 被 Ant Design 使用 as a small DOM observation primitive. |
| 30 | + |
| 31 | +## 安装 |
| 32 | + |
| 33 | +```bash |
| 34 | +npm install @rc-component/mutate-observer |
| 35 | +``` |
| 36 | + |
| 37 | +## 使用 |
| 38 | + |
| 39 | +```tsx | pure |
| 40 | +import MutateObserver from '@rc-component/mutate-observer'; |
| 41 | +export default () => ( |
| 42 | + <MutateObserver |
| 43 | + options={{ attributes: true, childList: true, subtree: true }} |
| 44 | + onMutate={(mutations, observer) => { |
| 45 | + console.log(mutations); |
| 46 | + console.log(observer); |
| 47 | + }} |
| 48 | + > |
| 49 | + <div>Observed content</div> |
| 50 | + </MutateObserver> |
| 51 | +); |
| 52 | +``` |
| 53 | + |
| 54 | +```tsx | pure |
| 55 | +import { useMutateObserver } from '@rc-component/mutate-observer'; |
| 56 | + |
| 57 | +export default ({ target }: { target: HTMLDivElement | null }) => { |
| 58 | + useMutateObserver(target, mutations => { |
| 59 | + console.log(mutations); |
| 60 | + }); |
| 61 | + |
| 62 | + return <div>Observed content</div>; |
| 63 | +}; |
| 64 | +``` |
| 65 | + |
| 66 | +## 示例 |
| 67 | + |
| 68 | +本地运行示例: |
| 69 | + |
| 70 | +```bash |
| 71 | +npm install |
| 72 | +npm start |
| 73 | +``` |
| 74 | + |
| 75 | +然后在浏览器中打开 dumi 开发服务地址。 |
| 76 | + |
| 77 | +## API |
| 78 | + |
| 79 | +### MutateObserver |
| 80 | + |
| 81 | +| 参数 | 类型 | 默认值 | 说明 | |
| 82 | +| -------- | ------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------- | |
| 83 | +| children | `React.ReactNode` | - | Node to render and observe. | |
| 84 | +| options | `MutationObserverInit` | - | Native observer options such as `attributes`, `childList`, and `subtree`. | |
| 85 | +| onMutate | `(mutations: MutationRecord[], observer: MutationObserver) => void` | - | Triggered when observed mutations are reported. | |
| 86 | + |
| 87 | +### useMutateObserver |
| 88 | + |
| 89 | +```ts |
| 90 | +useMutateObserver(target, callback, options); |
| 91 | +``` |
| 92 | + |
| 93 | +The hook observes the provided target element or element array with the same callback and native `MutationObserverInit` options used by the component. |
| 94 | + |
| 95 | +## 本地开发 |
| 96 | + |
| 97 | +```bash |
| 98 | +npm install |
| 99 | +npm start |
| 100 | +npm test |
| 101 | +npm run tsc |
| 102 | +npm run compile |
| 103 | +npm run build |
| 104 | +``` |
| 105 | + |
| 106 | +## 发布 |
| 107 | + |
| 108 | +```bash |
| 109 | +npm run prepublishOnly |
| 110 | +``` |
| 111 | + |
| 112 | +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. |
| 113 | + |
| 114 | +## 许可证 |
| 115 | + |
| 116 | +@rc-component/mutate-observer is released under the [MIT](./LICENSE) license. |
| 117 | + |
| 118 | +[npm-image]: https://img.shields.io/npm/v/@rc-component/mutate-observer.svg?style=flat-square |
| 119 | +[npm-url]: https://npmjs.org/package/@rc-component/mutate-observer |
| 120 | +[github-actions-image]: https://github.com/react-component/mutate-observer/actions/workflows/react-component-ci.yml/badge.svg |
| 121 | +[github-actions-url]: https://github.com/react-component/mutate-observer/actions/workflows/react-component-ci.yml |
| 122 | +[codecov-image]: https://img.shields.io/codecov/c/github/react-component/mutate-observer/master.svg?style=flat-square |
| 123 | +[codecov-url]: https://app.codecov.io/gh/react-component/mutate-observer |
| 124 | +[download-image]: https://img.shields.io/npm/dm/@rc-component/mutate-observer.svg?style=flat-square |
| 125 | +[download-url]: https://npmjs.org/package/@rc-component/mutate-observer |
| 126 | +[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/mutate-observer |
| 127 | +[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/mutate-observer |
| 128 | +[dumi-url]: https://github.com/umijs/dumi |
| 129 | +[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square |
0 commit comments