Skip to content

Commit 143fbe1

Browse files
committed
docs: add Chinese README
1 parent b32d412 commit 143fbe1

2 files changed

Lines changed: 131 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<p>👁️ React wrapper and hook for observing DOM mutations with a typed MutationObserver API.</p>
66
</div>
77

8+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
9+
810

911
<div align="center">
1012

README.zh-CN.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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

Comments
 (0)