Powered by [dumi](https://d.umijs.org) ---- - -[![NPM version][image-1]][1] -[![NPM downloads][image-2]][2] -[](https://www.npmjs.com/package/ahooks-v2) -[](https://github.com/alibaba/hooks/issues) -[](https://coveralls.io/github/alibaba/hooks?branch=master) - -[](http://isitmaintained.com/project/alibaba/hooks 'Percentage of issues still open') -[](http://isitmaintained.com/project/alibaba/hooks 'Average time to resolve an issue') - - -## ✨ Features - -- Easy to learn and use -- Supports SSR -- Special treatment for functions, avoid closure problems -- Contains a large number of advanced Hooks that are refined from business scenarios -- Contains a comprehensive collection of basic Hooks -- Written in TypeScript with predictable static types - -## 📦 Install - -```bash -$ npm install --save ahooks -# or -$ yarn add ahooks -# or -$ pnpm add ahooks -# or -$ bun add ahooks -``` - -## 🔨 Usage - -```ts -import { useRequest } from 'ahooks'; -``` - -## 💻 Online Demo - -[](https://codesandbox.io/s/demo-for-ahooks-forked-fg79k?file=/src/App.js) - -## 🤝 Contributing - -```bash -$ git clone git@github.com:alibaba/hooks.git -$ cd hooks -$ pnpm run init -$ pnpm start -``` - -Open your browser and visit http://127.0.0.1:8000 - -We welcome all contributions, please read our [CONTRIBUTING.MD](https://github.com/alibaba/hooks/blob/master/CONTRIBUTING.MD) first, let's build a better hooks library together. - -Thanks to all the contributors: - - -
-
-
-## 👥 Discuss
-
-Powered by [dumi](https://d.umijs.org) ---- - -[![NPM version][image-1]][1] -[![NPM downloads][image-2]][2] -[](https://www.npmjs.com/package/ahooks-v2) -[](https://github.com/alibaba/hooks/issues) -[](https://coveralls.io/github/alibaba/hooks?branch=master) - -[](http://isitmaintained.com/project/alibaba/hooks 'Percentage of issues still open') -[](http://isitmaintained.com/project/alibaba/hooks 'Average time to resolve an issue') - - -## ✨ 特性 - -- 易学易用 -- 支持 SSR -- 对输入输出函数做了特殊处理，避免闭包问题 -- 包含大量提炼自业务的高级 Hooks -- 包含丰富的基础 Hooks -- 使用 TypeScript 构建，提供完整的类型定义文件 - -## 📦 安装 - -```bash -$ npm install --save ahooks -# or -$ yarn add ahooks -# or -$ pnpm add ahooks -# or -$ bun add ahooks -``` - -## 🔨 使用 - -```ts -import { useRequest } from 'ahooks'; -``` - -## 💻 在线体验 - -[](https://codesandbox.io/s/demo-for-ahooks-forked-fg79k?file=/src/App.js) - -## 🤝 参与共建 - -```bash -$ git clone git@github.com:alibaba/hooks.git -$ cd hooks -$ pnpm run init -$ pnpm start -``` - -打开浏览器访问 http://127.0.0.1:8000 - -我们欢迎所有人参与共建，请参考[CONTRIBUTING.MD](https://github.com/alibaba/hooks/blob/master/CONTRIBUTING.zh-CN.MD) - -感谢所有贡献者： - - -
-
-
-## 👥 交流讨论
-
-- -
- -
- {
setValue(e.target.value);
diff --git a/packages/hooks/src/useAsyncEffect/index.en-US.md b/packages/hooks/src/useAsyncEffect/index.en-US.md
index 73c7231c5b..4eeaeddf8e 100644
--- a/packages/hooks/src/useAsyncEffect/index.en-US.md
+++ b/packages/hooks/src/useAsyncEffect/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useAsyncEffect
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 3
+toc: content
+demo:
+ cols: 2
---
-# useAsyncEffect
-
useEffect support async function.
## 代码演示
-### Default usage
-
-(null);
+
useClickAway(() => {
setCounter((s) => s + 1);
}, ref);
return (
(null);
+
useClickAway(
() => {
setCounter((s) => s + 1);
@@ -22,10 +24,10 @@ export default () => {
return (
);
diff --git a/packages/hooks/src/useClickAway/index.en-US.md b/packages/hooks/src/useClickAway/index.en-US.md
index 2f881fb0c9..39d6a522c2 100644
--- a/packages/hooks/src/useClickAway/index.en-US.md
+++ b/packages/hooks/src/useClickAway/index.en-US.md
@@ -1,37 +1,25 @@
---
-nav:
- path: /hooks
+title: useClickAway
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 2
+toc: content
+demo:
+ cols: 2
---
-# useClickAway
-
Listen for click events outside the target element.
## Examples
-### Default usage
-
-
+ setState(e.target.value)} />
+
+
);
};
diff --git a/packages/hooks/src/useControllableValue/demo/demo2.tsx b/packages/hooks/src/useControllableValue/demo/demo2.tsx
index 7daec7022f..94b969db06 100644
--- a/packages/hooks/src/useControllableValue/demo/demo2.tsx
+++ b/packages/hooks/src/useControllableValue/demo/demo2.tsx
@@ -1,33 +1,29 @@
/**
* title: Controlled component
- * desc: If props has the value field, then the state is controlled by it's parent
+ * description: If props has the value field, then the state is controlled by it's parent
*
* title.zh-CN: 受控组件
- * desc.zh-CN: 如果 props 有 value 字段，则由父级接管控制 state
+ * description.zh-CN: 如果 props 有 value 字段，则由父级接管控制 state
*/
import React, { useState } from 'react';
+import { Button, Input, Space } from 'antd';
import { useControllableValue } from 'ahooks';
const ControllableComponent = (props: any) => {
const [state, setState] = useControllableValue(props);
- return setState(e.target.value)} style={{ width: 300 }} />;
+ return setState(e.target.value)} />;
};
const Parent = () => {
const [state, setState] = useState('');
- const clear = () => {
- setState('');
- };
return (
- <>
+
);
};
export default Parent;
diff --git a/packages/hooks/src/useControllableValue/demo/demo3.tsx b/packages/hooks/src/useControllableValue/demo/demo3.tsx
index 67d0615380..e639666022 100644
--- a/packages/hooks/src/useControllableValue/demo/demo3.tsx
+++ b/packages/hooks/src/useControllableValue/demo/demo3.tsx
@@ -1,35 +1,28 @@
/**
* title: No value, have onChange component
- * desc: If there is an onChange field in props, the onChange will be trigger when state change
+ * description: If there is an onChange field in props, the onChange will be trigger when state change
*
* title.zh-CN: 无 value，有 onChange 的组件
- * desc.zh-CN: 只要 props 中有 onChange 字段，则在 state 变化时，就会触发 onChange 函数
+ * description.zh-CN: 只要 props 中有 onChange 字段，则在 state 变化时，就会触发 onChange 函数
*/
import React, { useState } from 'react';
+import { Input, Space } from 'antd';
import { useControllableValue } from 'ahooks';
const ControllableComponent = (props: any) => {
const [state, setState] = useControllableValue(props);
- return (
- {
- setState(e.target.value);
- }}
- style={{ width: 300 }}
- />
- );
+ return setState(e.target.value)} />;
};
const Parent = () => {
const [state, setState] = useState(0);
return (
- <>
-
);
};
export default Parent;
diff --git a/packages/hooks/src/useControllableValue/index.en-US.md b/packages/hooks/src/useControllableValue/index.en-US.md
index 63c126f913..87f3be6772 100644
--- a/packages/hooks/src/useControllableValue/index.en-US.md
+++ b/packages/hooks/src/useControllableValue/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useControllableValue
+nav: Hooks
+group:
+ title: Advanced
+ order: 7
+order: 1
+toc: content
+demo:
+ cols: 2
---
-# useControllableValue
-
In some components, we need the state to be managed by itself or controlled by it's parent. `useControllableValue` is a Hook that helps you manage this kind of state.
## Examples
-### Uncontrolled component
-
-, optio
| Property | Description | Type | Default |
| -------------------- | ------------------------------------------------------------------------------- | -------- | -------------- |
| defaultValue | The default value, will be overridden by `props.defaultValue` and `props.value` | - | - |
-| defaultValuePropName | Custom defaultValue attribute name | `string` | `defaultValue` |
+| defaultValuePropName | Custom defaultValue attribute name | `string` | `defaultValue` |
| valuePropName | Custom value attribute name | `string` | `value` |
| trigger | Custom trigger attribute name | `string` | `onChange` |
diff --git a/packages/hooks/src/useControllableValue/index.zh-CN.md b/packages/hooks/src/useControllableValue/index.zh-CN.md
index 0063517a4a..88835772ea 100644
--- a/packages/hooks/src/useControllableValue/index.zh-CN.md
+++ b/packages/hooks/src/useControllableValue/index.zh-CN.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useControllableValue
+nav: Hooks
+group:
+ title: Advanced
+ order: 7
+order: 1
+toc: content
+demo:
+ cols: 2
---
-# useControllableValue
-
在某些组件开发时，我们需要组件的状态既可以自己管理，也可以被外部控制，`useControllableValue` 就是帮你管理这种状态的 Hook。
## 代码演示
-### 非受控组件
-
-
+
+
+
+
);
}
diff --git a/packages/hooks/src/useCookieState/demo/demo3.tsx b/packages/hooks/src/useCookieState/demo/demo3.tsx
index a10b816699..e008cf1b01 100644
--- a/packages/hooks/src/useCookieState/demo/demo3.tsx
+++ b/packages/hooks/src/useCookieState/demo/demo3.tsx
@@ -1,12 +1,13 @@
/**
* title: Use the option property to configure Cookie
- * desc: 'Available options: defaultValue、expires、path、domain、secure、sameSite etc.'
+ * description: 'Available options: defaultValue、expires、path、domain、secure、sameSite etc.'
*
* title.zh-CN: 使用 option 配置 Cookie
- * desc.zh-CN: 可配置属性：默认值、有效时间、路径、域名、协议、跨域等，详见 Options 文档。
+ * description.zh-CN: 可配置属性：默认值、有效时间、路径、域名、协议、跨域等，详见 Options 文档。
*/
import React from 'react';
+import { Button, Space } from 'antd';
import { useCookieState } from 'ahooks';
export default function App() {
@@ -19,31 +20,27 @@ export default function App() {
return (
<>
+
+
+
+
);
}
diff --git a/packages/hooks/src/useCookieState/index.en-US.md b/packages/hooks/src/useCookieState/index.en-US.md
index 6aeea163d9..e158f29581 100644
--- a/packages/hooks/src/useCookieState/index.en-US.md
+++ b/packages/hooks/src/useCookieState/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useCookieState
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 5
+toc: content
+demo:
+ cols: 2
---
-# useCookieState
-
A Hook that store state into Cookie.
## Examples
-### Store state into Cookie
-
-();
-
const [countdown] = useCountDown({
targetDate,
onEnd: () => {
@@ -20,23 +20,11 @@ export default () => {
});
return (
- <>
-
+
+
);
};
diff --git a/packages/hooks/src/useCountDown/demo/demo3.tsx b/packages/hooks/src/useCountDown/demo/demo3.tsx
index 4b503a1cb2..8d1db1c146 100644
--- a/packages/hooks/src/useCountDown/demo/demo3.tsx
+++ b/packages/hooks/src/useCountDown/demo/demo3.tsx
@@ -1,17 +1,18 @@
/**
* title: The rest of time
- * desc: A countdown to the number of milliseconds remaining.
+ * description: A countdown to the number of milliseconds remaining.
*
* title.zh-CN: 剩余时间
- * desc.zh-CN: 剩余时间毫秒数的倒计时
+ * description.zh-CN: 剩余时间毫秒数的倒计时
*/
import React from 'react';
import { useCountDown } from 'ahooks';
-const App: React.FC = () => {
- const [countdown] = useCountDown({ leftTime: 60 * 1000 });
+export default () => {
+ const [countdown] = useCountDown({
+ leftTime: 60 * 1000,
+ });
+
return
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useCounter/index.en-US.md b/packages/hooks/src/useCounter/index.en-US.md
index 456b636d4f..b84e741a48 100644
--- a/packages/hooks/src/useCounter/index.en-US.md
+++ b/packages/hooks/src/useCounter/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useCounter
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 11
+toc: content
+demo:
+ cols: 2
---
-# useCounter
-
A hook that manage counter.
## Examples
-### Default usage
-
-();
- const debouncedValue = useDebounce(value, { wait: 500 });
+ const debouncedValue = useDebounce(value, {
+ wait: 500,
+ });
return (
-
+
);
};
diff --git a/packages/hooks/src/useDebounce/index.en-US.md b/packages/hooks/src/useDebounce/index.en-US.md
index 727c7b369c..b564053317 100644
--- a/packages/hooks/src/useDebounce/index.en-US.md
+++ b/packages/hooks/src/useDebounce/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useDebounce
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 8
+toc: content
+demo:
+ cols: 2
---
-# useDebounce
-
A hook that deal with the debounced value.
## Examples
-### Default usage
-
-([]);
+
useDebounceEffect(
() => {
setRecords((val) => [...val, value]);
@@ -13,21 +23,20 @@ export default () => {
wait: 1000,
},
);
+
return (
-
-
+
+
+
+
);
};
diff --git a/packages/hooks/src/useBoolean/index.en-US.md b/packages/hooks/src/useBoolean/index.en-US.md
index 5f544d0ce6..e2868e2451 100644
--- a/packages/hooks/src/useBoolean/index.en-US.md
+++ b/packages/hooks/src/useBoolean/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useBoolean
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 2
+toc: content
+demo:
+ cols: 2
---
-# useBoolean
-
A hook that elegantly manages boolean state.
## Examples
-### Default usage
-
-Effects：{JSON.stringify(state)}
-- - - -
+effects: {JSON.stringify(state)}
+
-
);
};
diff --git a/packages/hooks/src/useClickAway/demo/demo2.tsx b/packages/hooks/src/useClickAway/demo/demo2.tsx
index 99eb632cc4..c1576b417e 100644
--- a/packages/hooks/src/useClickAway/demo/demo2.tsx
+++ b/packages/hooks/src/useClickAway/demo/demo2.tsx
@@ -1,12 +1,13 @@
/**
* title: Support DOM
- * desc: Support pass in a DOM element or function.
+ * description: Support pass in a DOM element or function.
*
* title.zh-CN: 支持传入 DOM
- * desc.zh-CN: 支持直接传入 DOM 对象或 function。
+ * description.zh-CN: 支持直接传入 DOM 对象或 function。
*/
import React, { useState } from 'react';
+import { Button } from 'antd';
import { useClickAway } from 'ahooks';
export default () => {
@@ -21,10 +22,10 @@ export default () => {
return (
counter: {counter}
+
-
);
};
diff --git a/packages/hooks/src/useClickAway/demo/demo3.tsx b/packages/hooks/src/useClickAway/demo/demo3.tsx
index c7c0cdd5bd..9c825b9b8c 100644
--- a/packages/hooks/src/useClickAway/demo/demo3.tsx
+++ b/packages/hooks/src/useClickAway/demo/demo3.tsx
@@ -1,31 +1,31 @@
/**
* title: Support multiple DOM
- * desc: Support pass multiple DOM elements.
+ * description: Support pass multiple DOM elements.
*
* title.zh-CN: 支持多个 DOM 对象
- * desc.zh-CN: 支持传入多个目标对象。
+ * description.zh-CN: 支持传入多个目标对象。
*/
import React, { useState, useRef } from 'react';
+import { Button, Space } from 'antd';
import { useClickAway } from 'ahooks';
export default () => {
const [counter, setCounter] = useState(0);
const ref1 = useRef(null);
const ref2 = useRef(null);
+
useClickAway(() => {
setCounter((s) => s + 1);
}, [ref1, ref2]);
return (
counter: {counter}
+
-
-
+
+
+
);
};
diff --git a/packages/hooks/src/useClickAway/demo/demo4.tsx b/packages/hooks/src/useClickAway/demo/demo4.tsx
index b1fb69f832..780d4e50bd 100644
--- a/packages/hooks/src/useClickAway/demo/demo4.tsx
+++ b/packages/hooks/src/useClickAway/demo/demo4.tsx
@@ -1,17 +1,19 @@
/**
* title: Listen to other events
- * desc: By setting eventName, you can specify the event to be listened, Try click the right mouse.
+ * description: By setting eventName, you can specify the event to be listened, Try click the right mouse.
*
* title.zh-CN: 监听其它事件
- * desc.zh-CN: 通过设置 eventName，可以指定需要监听的事件，试试点击鼠标右键。
+ * description.zh-CN: 通过设置 eventName，可以指定需要监听的事件，试试点击鼠标右键。
*/
import React, { useState, useRef } from 'react';
+import { Button } from 'antd';
import { useClickAway } from 'ahooks';
export default () => {
const [counter, setCounter] = useState(0);
const ref = useRefcounter: {counter}
+
-
);
};
diff --git a/packages/hooks/src/useClickAway/demo/demo5.tsx b/packages/hooks/src/useClickAway/demo/demo5.tsx
index 78a1f443fe..dd861a1fb1 100644
--- a/packages/hooks/src/useClickAway/demo/demo5.tsx
+++ b/packages/hooks/src/useClickAway/demo/demo5.tsx
@@ -1,17 +1,19 @@
/**
* title: Support multiple events
- * desc: Set up multiple events, you can try using the mouse click or right click.
+ * description: Set up multiple events, you can try using the mouse click or right click.
*
* title.zh-CN: 支持传入多个事件名称
- * desc.zh-CN: 设置了多个事件，你可以试试用鼠标左键或者右键。
+ * description.zh-CN: 设置了多个事件，你可以试试用鼠标左键或者右键。
*/
import React, { useState, useRef } from 'react';
+import { Button } from 'antd';
import { useClickAway } from 'ahooks';
export default () => {
const [counter, setCounter] = useState(0);
const ref = useRef(null);
+
useClickAway(
() => {
setCounter((s) => s + 1);
@@ -22,10 +24,10 @@ export default () => {
return (
counter: {counter}
+
-
);
};
diff --git a/packages/hooks/src/useClickAway/demo/demo6.tsx b/packages/hooks/src/useClickAway/demo/demo6.tsx
index 233b472d2e..30331fb5de 100644
--- a/packages/hooks/src/useClickAway/demo/demo6.tsx
+++ b/packages/hooks/src/useClickAway/demo/demo6.tsx
@@ -1,18 +1,20 @@
/**
* title: Support shadow DOM
- * desc: Add the addEventListener to shadow DOM root instead of the document
+ * description: Add the addEventListener to shadow DOM root instead of the document
*
* title.zh-CN: 支持 shadow DOM
- * desc.zh-CN: 将 addEventListener 添加到 shadow DOM root
+ * description.zh-CN: 将 addEventListener 添加到 shadow DOM root
*/
import React, { useState, useRef } from 'react';
-import { useClickAway } from 'ahooks';
import root from 'react-shadow';
+import { Button } from 'antd';
+import { useClickAway } from 'ahooks';
export default () => {
const [counter, setCounter] = useState(0);
const ref = useRef(null);
+
useClickAway(
() => {
setCounter((s) => s + 1);
@@ -24,10 +26,10 @@ export default () => {
return (
counter: {counter}
+
-
counter: {counter}
+state:{state}
+ state:{state}
+ {value}
- - - +{value}
- - - +{countdown}
; }; - -export default App; diff --git a/packages/hooks/src/useCountDown/index.en-US.md b/packages/hooks/src/useCountDown/index.en-US.md index 65f1bf8d32..800149d149 100644 --- a/packages/hooks/src/useCountDown/index.en-US.md +++ b/packages/hooks/src/useCountDown/index.en-US.md @@ -1,23 +1,33 @@ --- -nav: - path: /hooks +title: useCountDown +nav: Hooks +group: + title: Scene + order: 2 +order: 10 +toc: content +demo: + cols: 2 --- -# useCountDown - A hook for manage countdown. -## Countdown to target time +## Examples -{current} [max: 10; min: 1;]
-
-
-
-
-
-
+ {foo.data}
- + ); } diff --git a/packages/hooks/src/useCreation/index.en-US.md b/packages/hooks/src/useCreation/index.en-US.md index 919d237564..5991684e34 100644 --- a/packages/hooks/src/useCreation/index.en-US.md +++ b/packages/hooks/src/useCreation/index.en-US.md @@ -1,10 +1,15 @@ --- -nav: - path: /hooks +title: useCreation +nav: Hooks +group: + title: Advanced + order: 7 +order: 2 +toc: content +demo: + cols: 2 --- -# useCreation - `useCreation` is the replacement for `useMemo` or `useRef`. `useMemo` can't guarantee the memoized value will not be recalculated, while `useCreation` can guarantee that. As the the official document of React.js says: @@ -20,9 +25,7 @@ const b = useCreation(() => new Subject(), []); // By using factory function, Su ## Examples -### Default usage - -
- setValue(e.target.value)}
- placeholder="Typed value"
- style={{ width: 280 }}
- />
-
+ DebouncedValue: {debouncedValue}
-debounced value: {debouncedValue}
+ setValue(e.target.value)} placeholder="Typed value" /> +
-
+ setValue(e.target.value)}
placeholder="Typed value"
- style={{ width: 280 }}
/>
-
+ -
-
- {records.map((record, index) => (
-
- {record} - ))} -
-
+ {records.map((record, index) => (
+
- {record} + ))} +
-
+
+
);
};
diff --git a/packages/hooks/src/useDebounceFn/index.en-US.md b/packages/hooks/src/useDebounceFn/index.en-US.md
index 42198da4d6..7d11c6b799 100644
--- a/packages/hooks/src/useDebounceFn/index.en-US.md
+++ b/packages/hooks/src/useDebounceFn/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useDebounceFn
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 5
+toc: content
+demo:
+ cols: 2
---
-# useDebounceFn
-
A hook that deal with the debounced function.
## Examples
-### Default usage
-
-Clicked count: {value}
-
+
+
+
);
};
diff --git a/packages/hooks/src/useDeepCompareEffect/index.en-US.md b/packages/hooks/src/useDeepCompareEffect/index.en-US.md
index b8a8ad4047..630f40ab41 100644
--- a/packages/hooks/src/useDeepCompareEffect/index.en-US.md
+++ b/packages/hooks/src/useDeepCompareEffect/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useDeepCompareEffect
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 8
+toc: content
+demo:
+ cols: 2
---
-# useDeepCompareEffect
-
Usage is the same as `useEffect`, but deps are compared with [lodash.isEqual](https://lodash.com/docs/4.17.15#isEqual).
## Examples
-### Default usage
-
-effectCount: {effectCountRef.current}
deepCompareCount: {deepCompareCountRef.current}
-- -
-
+
+
+
);
};
diff --git a/packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md b/packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md
index 03d25e7b96..28134ea1f8 100644
--- a/packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md
+++ b/packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useDeepCompareLayoutEffect
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 9
+toc: content
+demo:
+ cols: 2
---
-# useDeepCompareLayoutEffect
-
Usage is the same as `useLayoutEffect`, but deps are compared with [lodash.isEqual](https://lodash.com/docs/4.17.15#isEqual).
## Examples
-### Default usage
-
-effectCount: {effectCountRef.current}
deepCompareCount: {deepCompareCountRef.current}
-- -
-
-
+
{isHovering ? 'release here' : 'drop here'}
-
+
{['1', '2', '3', '4', '5'].map((e) => (
(
@@ -35,7 +33,7 @@ useDrag(
);
```
-#### Params
+### Params
| Property | Description | Type | Default |
| -------- | ------------------ | ----------------------------------------------------------- | ------- |
@@ -43,7 +41,7 @@ useDrag(
| target | DOM element or ref | `() => Element` \| `Element` \| `MutableRefObject` | - |
| options | More config | `DragOptions` | - |
-#### DragOptions
+### DragOptions
| Property | Description | Type | Default |
| ----------- | ------------------------------------------------------------- | ------------------------------ | ------- |
@@ -51,7 +49,7 @@ useDrag(
| onDragEnd | On drag end callback | `(e: React.DragEvent) => void` | - |
| dragImage | Customize image that follow the mouse pointer during dragging | `DragImageOptions` | - |
-#### DragImageOptions
+### DragImageOptions
| 参数 | 说明 | 类型 | 默认值 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------ |
@@ -59,7 +57,7 @@ useDrag(
| offsetX | the horizontal offset within the image | `number` | 0 |
| offsetY | the vertical offset within the image | `number` | 0 |
-### useDrop
+## API - useDrop
```typescript
useDrop(
@@ -68,14 +66,14 @@ useDrop(
);
```
-#### Params
+### Params
| Property | Description | Type | Default |
| -------- | ------------------ | ----------------------------------------------------------- | ------- |
| target | DOM element or ref | `() => Element` \| `Element` \| `MutableRefObject` | - |
| options | More config | `DropOptions` | - |
-#### DropOptions
+### DropOptions
| Property | Description | Type | Default |
| ----------- | ------------------------------------------- | --------------------------------------------- | ------- |
diff --git a/packages/hooks/src/useDrop/index.zh-CN.md b/packages/hooks/src/useDrop/index.zh-CN.md
index c1dc96d4ae..e0768d8958 100644
--- a/packages/hooks/src/useDrop/index.zh-CN.md
+++ b/packages/hooks/src/useDrop/index.zh-CN.md
@@ -1,10 +1,15 @@
---
-nav:
- path: /hooks
+title: useDrop & useDrag
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 4
+toc: content
+demo:
+ cols: 2
---
-# useDrop & useDrag
-
处理元素拖拽的 Hook。
> useDrop 可以单独使用来接收文件、文字和网址的拖拽。
@@ -15,17 +20,10 @@ nav:
## 代码演示
-### 基础用法
-
-(
@@ -35,7 +33,7 @@ useDrag(
);
```
-#### Params
+### Params
| 参数 | 说明 | 类型 | 默认值 |
| ------- | --------------------- | ----------------------------------------------------------- | ------ |
@@ -43,7 +41,7 @@ useDrag(
| target | DOM 节点或者 Ref 对象 | `() => Element` \| `Element` \| `MutableRefObject` | - |
| options | 额外的配置项 | `DragOptions` | - |
-#### DragOptions
+### DragOptions
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ---------------------------------- | ------------------------------ | ------ |
@@ -51,7 +49,7 @@ useDrag(
| onDragEnd | 结束拖拽的回调 | `(e: React.DragEvent) => void` | - |
| dragImage | 自定义拖拽过程中跟随鼠标指针的图像 | `DragImageOptions` | - |
-#### DragImageOptions
+### DragImageOptions
| 参数 | 说明 | 类型 | 默认值 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | ------ |
@@ -59,7 +57,7 @@ useDrag(
| offsetX | 水平偏移 | `number` | 0 |
| offsetY | 垂直偏移 | `number` | 0 |
-### useDrop
+## API - useDrop
```typescript
useDrop(
@@ -68,14 +66,14 @@ useDrop(
);
```
-#### Params
+### Params
| 参数 | 说明 | 类型 | 默认值 |
| ------- | --------------------- | ----------------------------------------------------------- | ------ |
| target | DOM 节点或者 Ref 对象 | `() => Element` \| `Element` \| `MutableRefObject` | - |
| options | 额外的配置项 | `DragOptions` | - |
-#### DropOptions
+### DropOptions
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------ | --------------------------------------------- | ------ |
diff --git a/packages/hooks/src/useDynamicList/demo/demo1.tsx b/packages/hooks/src/useDynamicList/demo/demo1.tsx
index e7045a086c..0b65e6dd8c 100644
--- a/packages/hooks/src/useDynamicList/demo/demo1.tsx
+++ b/packages/hooks/src/useDynamicList/demo/demo1.tsx
@@ -1,50 +1,37 @@
/**
* title: Basic usage
- * desc: Dynamic list management
+ * description: Dynamic list management
*
* title.zh-CN: 基础用法
- * desc.zh-CN: 管理动态列表
+ * description.zh-CN: 管理动态列表
*/
+import React from 'react';
+import { Input, Space } from 'antd';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { useDynamicList } from 'ahooks';
-import { Input } from 'antd';
-import React from 'react';
export default () => {
const { list, remove, getKey, insert, replace } = useDynamicList(['David', 'Jack']);
const Row = (index: number, item: any) => (
- remove(index)} />}
+ insert(index + 1, '')} />
+
);
return (
<>
- {list.map((ele, index) => Row(index, ele))}
-
-
+ {list.map((ele, index) => Row(index, ele))}
+
+ remove(index)} />}
+ insert(index + 1, '')} />
+
);
- return <>{list.map((ele, index) => Row(index, ele))};
+ return {list.map((ele, index) => Row(index, ele))} ;
};
export default () => {
const [form] = Form.useForm();
-
const [result, setResult] = useState('');
return (
@@ -72,23 +57,22 @@ export default () => {
+
+
+
+
+
+
+
+ {list.length > 1 && remove(index)} />}
+ insert(index + 1, '')} />
+
+
);
return (
<>
-
-
-
-
+
+
+
+
+
- ([
- { name: 'my bro', age: '23', memo: "he's my bro" },
- { name: 'my sis', age: '21', memo: "she's my sis" },
- {},
- ]);
+const DEFAULT_LIST = [
+ { name: 'my bro', age: '23', memo: "he's my bro" },
+ { name: 'my sis', age: '21', memo: "she's my sis" },
+ {},
+];
+export default () => {
const [form] = Form.useForm();
-
const [result, setResult] = useState('');
+ const { list, remove, getKey, move, push, sortList, resetList } =
+ useDynamicList
- (DEFAULT_LIST);
const columns = [
{
@@ -35,12 +36,12 @@ export default () => {
dataIndex: 'name',
key: 'name',
render: (text: string, row: Item, index: number) => (
- <>
-
+
-
+
-
+
),
},
{
@@ -49,7 +50,7 @@ export default () => {
key: 'age',
render: (text: string, row: Item, index: number) => (
-
+
),
},
@@ -58,23 +59,22 @@ export default () => {
title: 'Memo',
dataIndex: 'memo',
render: (text: string, row: Item, index: number) => (
- <>
+
-
+
-
-
-
-
+
+
),
},
];
return (
-
+
+
+
+ ;
}> = function (props) {
return (
- ;
}> = function (props) {
const inputRef = useRef();
+
props.focus$.useSubscription(() => {
inputRef.current.focus();
});
- return (
-
- );
+
+ return ;
};
export default function () {
const focus$ = useEventEmitter();
+
return (
<>
+
+
+
);
};
diff --git a/packages/hooks/src/useEventTarget/demo/demo2.tsx b/packages/hooks/src/useEventTarget/demo/demo2.tsx
index e42032dde8..180fc34188 100644
--- a/packages/hooks/src/useEventTarget/demo/demo2.tsx
+++ b/packages/hooks/src/useEventTarget/demo/demo2.tsx
@@ -1,12 +1,13 @@
/**
* title: Custom transformer function
- * desc: Controlled input component with number input only
+ * description: Controlled input component with number input only.
*
* title.zh-CN: 自定义转换函数
- * desc.zh-CN: 只能输入数字的 input 组件
+ * description.zh-CN: 只能输入数字的 input 组件。
*/
import React from 'react';
+import { Button, Input, Space } from 'antd';
import { useEventTarget } from 'ahooks';
export default () => {
@@ -16,16 +17,9 @@ export default () => {
});
return (
-
+
+
+
);
};
diff --git a/packages/hooks/src/useEventTarget/index.en-US.md b/packages/hooks/src/useEventTarget/index.en-US.md
index 36ec29810d..40d8746a78 100644
--- a/packages/hooks/src/useEventTarget/index.en-US.md
+++ b/packages/hooks/src/useEventTarget/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useEventTarget
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 5
+toc: content
+demo:
+ cols: 2
---
-# useEventTarget
-
A hook that encapsulates `onChange` and `value` logic for form controls that obtains value through `event.target.value`. It also supports custom transformer and reset functionalities.
## Example
-### Basic Usage
-
-
- - - +
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useExternal/demo/demo3.tsx b/packages/hooks/src/useExternal/demo/demo3.tsx
deleted file mode 100644
index fe3ec83b5a..0000000000
--- a/packages/hooks/src/useExternal/demo/demo3.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * title: Load style dynamically
- * desc: Load css file, such as [bootstrap-badge.css](/useExternal/bootstrap-badge.css)
- *
- * title.zh-CN: 动态加载样式
- * desc.zh-CN: 加载 css 文件，例如引入 [bootstrap-badge.css](/useExternal/bootstrap-badge.css)
- */
-
-import { useExternal } from 'ahooks';
-import React, { useState } from 'react';
-
-export default () => {
- const [path, setPath] = useState('');
- const status = useExternal(path);
-
- const [path2, setPath2] = useState('');
- const status2 = useExternal(path2);
-
- return (
- <>
-
- -
-
+
+
+
+
);
};
diff --git a/packages/hooks/src/useFavicon/index.en-US.md b/packages/hooks/src/useFavicon/index.en-US.md
index 29a4880a2f..d5383f4a45 100644
--- a/packages/hooks/src/useFavicon/index.en-US.md
+++ b/packages/hooks/src/useFavicon/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useFavicon
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 8
+toc: content
+demo:
+ cols: 2
---
-# useFavicon
-
A hook that set the favicon of the page.
## Example
-### Basic Usage
-
-
+ 
+
+
);
};
diff --git a/packages/hooks/src/useFullscreen/demo/demo3.tsx b/packages/hooks/src/useFullscreen/demo/demo3.tsx
index f1ae3cc52c..0d7f3d599a 100644
--- a/packages/hooks/src/useFullscreen/demo/demo3.tsx
+++ b/packages/hooks/src/useFullscreen/demo/demo3.tsx
@@ -5,6 +5,7 @@
*/
import React, { useRef } from 'react';
+import { Button, Card, Space } from 'antd';
import { useFullscreen } from 'ahooks';
export default () => {
@@ -14,19 +15,13 @@ export default () => {
});
return (
-
+
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useFullscreen/demo/demo4.tsx b/packages/hooks/src/useFullscreen/demo/demo4.tsx
index bdcb12884a..0d4391c649 100644
--- a/packages/hooks/src/useFullscreen/demo/demo4.tsx
+++ b/packages/hooks/src/useFullscreen/demo/demo4.tsx
@@ -8,6 +8,7 @@
import React, { useRef } from 'react';
import { useFullscreen } from 'ahooks';
+import { Button, Space } from 'antd';
function vanillaToggleFullscreen(element) {
const isFullscreen = !!document.fullscreenElement;
@@ -25,15 +26,13 @@ export default () => {
return (
=> {
console.log(sorter, filters);
diff --git a/packages/hooks/src/useFusionTable/demo/form.tsx b/packages/hooks/src/useFusionTable/demo/form.tsx
index 6a8205c0c0..695a0d116b 100644
--- a/packages/hooks/src/useFusionTable/demo/form.tsx
+++ b/packages/hooks/src/useFusionTable/demo/form.tsx
@@ -1,7 +1,7 @@
import React from 'react';
+import ReactJson from 'react-json-view';
import { Table, Pagination, Field, Form, Input, Button, Select, Icon } from '@alifd/next';
import { useFusionTable } from 'ahooks';
-import ReactJson from 'react-json-view';
interface Item {
name: {
@@ -17,7 +17,7 @@ interface Result {
list: Item[];
}
-const getTableData = ({ current, pageSize }, formData: Object): Promise => {
+const getTableData = ({ current, pageSize }, formData: object): Promise => {
let query = `page=${current}&size=${pageSize}`;
Object.entries(formData).forEach(([key, value]) => {
if (value) {
diff --git a/packages/hooks/src/useFusionTable/demo/init.tsx b/packages/hooks/src/useFusionTable/demo/init.tsx
index a1bc19b656..1dfaecbd01 100644
--- a/packages/hooks/src/useFusionTable/demo/init.tsx
+++ b/packages/hooks/src/useFusionTable/demo/init.tsx
@@ -1,7 +1,7 @@
-import { Button, Field, Form, Icon, Input, Pagination, Select, Table } from '@alifd/next';
import React from 'react';
-import { useFusionTable } from 'ahooks';
import ReactJson from 'react-json-view';
+import { Button, Field, Form, Icon, Input, Pagination, Select, Table } from '@alifd/next';
+import { useFusionTable } from 'ahooks';
interface Item {
name: {
@@ -17,7 +17,7 @@ interface Result {
list: Item[];
}
-const getTableData = ({ current, pageSize }, formData: Object): Promise => {
+const getTableData = ({ current, pageSize }, formData: object): Promise => {
let query = `page=${current}&size=${pageSize}`;
Object.entries(formData).forEach(([key, value]) => {
if (value) {
diff --git a/packages/hooks/src/useFusionTable/demo/table.tsx b/packages/hooks/src/useFusionTable/demo/table.tsx
index de53a66f08..2dd9920b26 100644
--- a/packages/hooks/src/useFusionTable/demo/table.tsx
+++ b/packages/hooks/src/useFusionTable/demo/table.tsx
@@ -1,5 +1,5 @@
-import { Pagination, Table } from '@alifd/next';
import React from 'react';
+import { Pagination, Table } from '@alifd/next';
import { useFusionTable } from 'ahooks';
interface Item {
diff --git a/packages/hooks/src/useFusionTable/demo/validate.tsx b/packages/hooks/src/useFusionTable/demo/validate.tsx
index f9c151316e..9f85ca0147 100644
--- a/packages/hooks/src/useFusionTable/demo/validate.tsx
+++ b/packages/hooks/src/useFusionTable/demo/validate.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Table, Pagination, Field, Form, Input, Select, Icon } from '@alifd/next';
-import { useFusionTable } from 'ahooks';
import ReactJson from 'react-json-view';
+import { Table, Pagination, Field, Form, Input, Icon } from '@alifd/next';
+import { useFusionTable } from 'ahooks';
interface Item {
name: {
@@ -17,7 +17,7 @@ interface Result {
list: Item[];
}
-const getTableData = ({ current, pageSize }, formData: Object): Promise => {
+const getTableData = ({ current, pageSize }, formData: object): Promise => {
let query = `page=${current}&size=${pageSize}`;
Object.entries(formData).forEach(([key, value]) => {
if (value) {
diff --git a/packages/hooks/src/useFusionTable/fusionAdapter.ts b/packages/hooks/src/useFusionTable/fusionAdapter.ts
index 7c6768ef0b..73f456bb08 100644
--- a/packages/hooks/src/useFusionTable/fusionAdapter.ts
+++ b/packages/hooks/src/useFusionTable/fusionAdapter.ts
@@ -10,7 +10,7 @@ export const fieldAdapter = (field: Field) =>
validateFields: (fields, callback) => {
field.validate(fields, callback);
},
- } as AntdFormUtils);
+ }) as AntdFormUtils;
export const resultAdapter = (result: any) => {
const tableProps = {
diff --git a/packages/hooks/src/useFusionTable/index.en-US.md b/packages/hooks/src/useFusionTable/index.en-US.md
index ce99261732..901593e279 100644
--- a/packages/hooks/src/useFusionTable/index.en-US.md
+++ b/packages/hooks/src/useFusionTable/index.en-US.md
@@ -1,10 +1,15 @@
---
-nav:
- path: /hooks
+title: useFusionTable
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 2
+toc: content
+demo:
+ cols: 2
---
-# useFusionTable
-
useFusionTable encapsulates the commonly used [Fusion Form](https://fusion.design/pc/component/basic/form) and [Fusion Table](https://fusion.design/pc/component/basic/table) data binding logic.
`useFusionTable` is implemented based on `useRequest`. Before using it, you need to understand a few points that are different from `useRequest`:
@@ -27,7 +32,7 @@ useFusionTable encapsulates the commonly used [Fusion Form](https://fusion.desig
-
-();
return (
-
+
replace(index, e.target.value)}
value={item}
+ onChange={(e) => replace(index, e.target.value)}
/>
-
- {list.length > 1 && (
- {
- remove(index);
- }}
- />
- )}
- {
- insert(index + 1, '');
- }}
- />
-
+ {list.length > 1 && {JSON.stringify([list])}
+ {JSON.stringify(list)}
); }; diff --git a/packages/hooks/src/useDynamicList/demo/demo2.tsx b/packages/hooks/src/useDynamicList/demo/demo2.tsx index e7bf41c150..7acac5a140 100644 --- a/packages/hooks/src/useDynamicList/demo/demo2.tsx +++ b/packages/hooks/src/useDynamicList/demo/demo2.tsx @@ -1,15 +1,15 @@ /** * title: Used in antd Form - * desc: Used in antd Form, a component can be packaged independently, like DynamicInputs in the example. + * description: Used in antd Form, a component can be packaged independently, like DynamicInputs in the example. * * title.zh-CN: 在 antd Form 中使用 - * desc.zh-CN: 在 antd Form 中使用，可以独立封装一个组件，比如例子中的 DynamicInputs。 + * description.zh-CN: 在 antd Form 中使用，可以独立封装一个组件，比如例子中的 DynamicInputs。 */ +import React, { useEffect, useState } from 'react'; +import { Button, Form, Input, Space } from 'antd'; import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'; import { useDynamicList } from 'ahooks'; -import { Button, Form, Input } from 'antd'; -import React, { useEffect, useState } from 'react'; const DynamicInputs = ({ value = [], @@ -32,37 +32,22 @@ const DynamicInputs = ({ }, [list]); const Row = (index: number, item: any) => ( -
+
replace(index, e.target.value)}
value={item}
+ onChange={(e) => replace(index, e.target.value)}
/>
-
- {list.length > 1 && (
- {
- remove(index);
- }}
- />
- )}
- {
- insert(index + 1, '');
- }}
- />
-
+ {list.length > 1 && {result}
); diff --git a/packages/hooks/src/useDynamicList/demo/demo3.tsx b/packages/hooks/src/useDynamicList/demo/demo3.tsx index b5c319fab4..a4881c77d7 100644 --- a/packages/hooks/src/useDynamicList/demo/demo3.tsx +++ b/packages/hooks/src/useDynamicList/demo/demo3.tsx @@ -1,73 +1,61 @@ /** - * title: Used in antd Form - * desc: Pay attention to the use of sortList. The data of antd Form is not sorted correctly. sortList can be used to calibrate the sorting. + * title: Another way of writing used in antd Form + * description: Pay attention to the use of sortList. The data of antd Form is not sorted correctly. sortList can be used to calibrate the sorting. * * title.zh-CN: 在 antd Form 中使用的另一种写法 - * desc.zh-CN: 注意 sortList 的使用，antd Form 获取的数据排序不对，通过 sortList 可以校准排序。 + * description.zh-CN: 注意 sortList 的使用，antd Form 获取的数据排序不对，通过 sortList 可以校准排序。 */ import React, { useState } from 'react'; -import { Form, Button, Input } from 'antd'; +import { Form, Button, Input, Space } from 'antd'; import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'; import { useDynamicList } from 'ahooks'; +const DEFAULT_LIST = ['David', 'Jack']; + export default () => { - const { list, remove, getKey, insert, resetList, sortList } = useDynamicList(['David', 'Jack']); const [form] = Form.useForm(); - const [result, setResult] = useState(''); + const { list, remove, getKey, insert, sortList, resetList } = useDynamicList(DEFAULT_LIST); const Row = (index: number, item: any) => ( -
-
+
-
-
-
-
-
- {list.length > 1 && (
- {
- remove(index);
- }}
- />
- )}
- {
- insert(index + 1, '');
- }}
- />
-
- {result}
);
diff --git a/packages/hooks/src/useDynamicList/demo/demo4.tsx b/packages/hooks/src/useDynamicList/demo/demo4.tsx
index ca0f37cea6..40678ccea1 100644
--- a/packages/hooks/src/useDynamicList/demo/demo4.tsx
+++ b/packages/hooks/src/useDynamicList/demo/demo4.tsx
@@ -1,15 +1,15 @@
/**
* title: Draggable dynamic table
- * desc: Using antd Table to build dynamic table form.
+ * description: Using antd Table to build dynamic table form.
*
* title.zh-CN: 可拖拽的动态表格
- * desc.zh-CN: 使用 antd table 构建动态表格
+ * description.zh-CN: 使用 antd table 构建动态表格
*/
-import { DragOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Table } from 'antd';
import React, { useState } from 'react';
import ReactDragListView from 'react-drag-listview';
+import { Button, Form, Input, Space, Table } from 'antd';
+import { DragOutlined } from '@ant-design/icons';
import { useDynamicList } from 'ahooks';
interface Item {
@@ -18,16 +18,17 @@ interface Item {
memo?: string;
}
-export default () => {
- const { list, remove, getKey, move, push, sortList } = useDynamicList
+ <>
-
-
+ {result && `content: ${result}`}
- {result}
+ ); }; diff --git a/packages/hooks/src/useDynamicList/index.en-US.md b/packages/hooks/src/useDynamicList/index.en-US.md index f35e373701..fb2dd52eb0 100644 --- a/packages/hooks/src/useDynamicList/index.en-US.md +++ b/packages/hooks/src/useDynamicList/index.en-US.md @@ -1,29 +1,23 @@ --- -nav: - path: /hooks +title: useDynamicList +nav: Hooks +group: + title: Scene + order: 2 +order: 5 +toc: content +demo: + cols: 2 --- -# useDynamicList - A hook that helps you manage dynamic list and generate unique key for each item. ## Examples -### Basic usage - -
+
+
+
);
};
@@ -32,16 +27,17 @@ const InputBox: FC<{
focus$: EventEmitterYou received a message
- -Your press key is {value}
; + return ( ++ Your press key is: {value} +
+ ); }; diff --git a/packages/hooks/src/useEventListener/index.en-US.md b/packages/hooks/src/useEventListener/index.en-US.md index 2e89dd2404..d80bbc5dcc 100644 --- a/packages/hooks/src/useEventListener/index.en-US.md +++ b/packages/hooks/src/useEventListener/index.en-US.md @@ -1,21 +1,21 @@ --- -nav: - path: /hooks +title: useEventListener +nav: Hooks +group: + title: Dom + order: 6 +order: 1 +toc: content +demo: + cols: 2 --- -# useEventListener - Use addEventListener elegant by Hook. ## Examples -### Default usage - -
-
-
-
+
-
-
-
+ Status: {status}
-
+
Primary
Secondary
Success
@@ -28,18 +28,11 @@ export default () => {
Info
Light
Dark
-
- - - - +
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
- - -
第一个
-- Status: {status} -
- - --
第二个
-- Status: {status2} -
- - - - ); -}; diff --git a/packages/hooks/src/useExternal/index.en-US.md b/packages/hooks/src/useExternal/index.en-US.md index dde8dc4e21..4ab6bbeed5 100644 --- a/packages/hooks/src/useExternal/index.en-US.md +++ b/packages/hooks/src/useExternal/index.en-US.md @@ -1,21 +1,21 @@ --- -nav: - path: /hooks +title: useExternal +nav: Hooks +group: + title: Dom + order: 6 +order: 6 +toc: content +demo: + cols: 2 --- -# useExternal - Dynamically load JS or CSS, useExternal can ensure that the resource are globally unique. ## Example -### Basic Usage - -Current Favicon: {url}
- - - +
+ <>
+
+
);
};
diff --git a/packages/hooks/src/useFocusWithin/demo/demo2.tsx b/packages/hooks/src/useFocusWithin/demo/demo2.tsx
index e1dfe61a9a..60a9ae2dfe 100644
--- a/packages/hooks/src/useFocusWithin/demo/demo2.tsx
+++ b/packages/hooks/src/useFocusWithin/demo/demo2.tsx
@@ -1,35 +1,44 @@
/**
* title: Pass in DOM element
- * desc: Pass in a function that returns the DOM element.
+ * description: Pass in a function that returns the DOM element.
*
* title.zh-CN: 传入 DOM 元素
- * desc.zh-CN: 传入 function 并返回一个 dom 元素。
+ * description.zh-CN: 传入 function 并返回一个 dom 元素。
*/
-import { useFocusWithin } from 'ahooks';
import React from 'react';
+import { Form, Input, message } from 'antd';
+import { useFocusWithin } from 'ahooks';
export default () => {
- const isFocusWithin = useFocusWithin(() => document.getElementById('focus-area'));
+ const isFocusWithin = useFocusWithin(() => document.getElementById('focus-area'), {
+ onFocus: () => {
+ message.info('focus');
+ },
+ onBlur: () => {
+ message.info('blur');
+ },
+ });
return (
- isFocusWithin: {JSON.stringify(isFocusWithin)}
-
-
+
- isFocusWithin: {JSON.stringify(isFocusWithin)}
-
+ <>
+
+
);
};
diff --git a/packages/hooks/src/useFocusWithin/index.en-US.md b/packages/hooks/src/useFocusWithin/index.en-US.md
index 658266c3ed..337d9cb7d1 100644
--- a/packages/hooks/src/useFocusWithin/index.en-US.md
+++ b/packages/hooks/src/useFocusWithin/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useFocusWithin
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 19
+toc: content
+demo:
+ cols: 2
---
-# useFocusWithin
-
Monitor whether the current focus is within a certain area, Same as css attribute [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within).
## Examples
-### Default usage
-
-isFocusWithin: {JSON.stringify(isFocusWithin)}
-
-
+
- isFocusWithin: {JSON.stringify(isFocusWithin)}
-
-
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useFullscreen/demo/demo2.tsx b/packages/hooks/src/useFullscreen/demo/demo2.tsx
index a2ab3cc76a..5050e5c7d8 100644
--- a/packages/hooks/src/useFullscreen/demo/demo2.tsx
+++ b/packages/hooks/src/useFullscreen/demo/demo2.tsx
@@ -5,19 +5,17 @@
*/
import React from 'react';
+import { Button, Space } from 'antd';
import { useFullscreen } from 'ahooks';
import img from './react-hooks.jpg';
export default () => {
const [, { enterFullscreen }] = useFullscreen(() => document.getElementById('fullscreen-img'));
+
return (
- {isFullscreen ? 'Fullscreen' : 'Not fullscreen'}
-
-
-
-
-
+ {isFullscreen ? 'Fullscreen' : 'Not Fullscreen'}
-
+
-
-
-
-
-
+
-
- {isFullscreen ? 'Fullscreen' : 'Not fullscreen'}
-
-
-
- {isFullscreen ? 'Fullscreen' : 'Not Fullscreen'}
+
-
+
+
+
+
);
};
diff --git a/packages/hooks/src/useFullscreen/index.en-US.md b/packages/hooks/src/useFullscreen/index.en-US.md
index b7d03bc517..c4ea9cf81e 100644
--- a/packages/hooks/src/useFullscreen/index.en-US.md
+++ b/packages/hooks/src/useFullscreen/index.en-US.md
@@ -1,29 +1,23 @@
---
-nav:
- path: /hooks
+title: useFullscreen
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 9
+toc: content
+demo:
+ cols: 2
---
-# useFullscreen
-
manages DOM full screen.
## Examples
-### Default usage
-
-{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}
-
-
-
-
+ {isFullscreen ? 'Fullscreen' : 'Not Fullscreen'}
-
-
- setValue(e.target.value)} />
-
+
+
);
};
diff --git a/packages/hooks/src/useHistoryTravel/demo/demo2.tsx b/packages/hooks/src/useHistoryTravel/demo/demo2.tsx
index 060d7a0d3a..25fa3feea9 100644
--- a/packages/hooks/src/useHistoryTravel/demo/demo2.tsx
+++ b/packages/hooks/src/useHistoryTravel/demo/demo2.tsx
@@ -1,15 +1,18 @@
/**
- * title: TodoList
- * desc: Redo and undo operations
+ * title: Todo List
+ * description: Redo and undo operations.
*
* title.zh-CN: 可撤销恢复的 Todo List
- * desc.zh-CN: 可以实现撤销恢复等操作。
+ * description.zh-CN: 可以实现撤销恢复等操作。
*/
-import { useHistoryTravel } from 'ahooks';
import React, { useState } from 'react';
+import { Button, Input, InputNumber, Space } from 'antd';
+import { useHistoryTravel } from 'ahooks';
export default () => {
+ const [inputValue, setInputValue] = useState('');
+ const [step, setStep] = useState(0);
const {
value = [],
setValue,
@@ -21,9 +24,6 @@ export default () => {
reset,
} = useHistoryTravel(['do homework']);
- const [inputValue, setInputValue] = useState('');
- const [step, setStep] = useState(-1);
-
const onAdd = () => {
setValue([...value, inputValue]);
setInputValue('');
@@ -41,53 +41,49 @@ export default () => {
};
return (
-
- (
'',
- maxLength,
+ MAX_LENGTH,
);
return (
-
-
+
+
+
);
};
diff --git a/packages/hooks/src/useHistoryTravel/demo/demo3.tsx b/packages/hooks/src/useHistoryTravel/demo/demo3.tsx
index 2a62778d56..0028c9d9fe 100644
--- a/packages/hooks/src/useHistoryTravel/demo/demo3.tsx
+++ b/packages/hooks/src/useHistoryTravel/demo/demo3.tsx
@@ -1,33 +1,37 @@
/**
* title: Limit maximum history length
- * desc: Limit the maximum number of history records to avoid excessive memory consumption.
+ * description: Limit the maximum number of history records to avoid excessive memory consumption.
*
* title.zh-CN: 限制历史记录最大长度
- * desc.zh-CN: 限制最大历史记录数量,避免过度占用内存。
+ * description.zh-CN: 限制最大历史记录数量,避免过度占用内存。
*/
-import { useHistoryTravel } from 'ahooks';
import React from 'react';
+import { Button, Input, Space } from 'antd';
+import { useHistoryTravel } from 'ahooks';
+
+const MAX_LENGTH = 3;
export default () => {
- const maxLength = 3;
const { value, setValue, backLength, forwardLength, back, forward } = useHistoryTravelTODO List
--
+
- {it} ))}
+
- TODO List
+-
{value.map((it, index) => (
-
+ setInputValue(e.target.value)}
placeholder="Please enter TODO name"
- style={{ width: 200, marginRight: 8 }}
/>
-
-
-
-
+
+
+ setStep(e.target.value as any)}
+ onChange={(val) => setStep(val as number)}
max={forwardLength}
min={backLength * -1}
- style={{ marginRight: 8, width: 60 }}
/>
-
-
-
-
+ setValue(e.target.value)} />
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useHistoryTravel/index.en-US.md b/packages/hooks/src/useHistoryTravel/index.en-US.md
index 17cf25085c..9ad34dda23 100644
--- a/packages/hooks/src/useHistoryTravel/index.en-US.md
+++ b/packages/hooks/src/useHistoryTravel/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useHistoryTravel
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 7
+toc: content
+demo:
+ cols: 2
---
-# useHistoryTravel
-
A hook to manage state change history. It provides encapsulation methods to travel through the history.
## Examples
-### Basic usage
-
-maxLength: {maxLength}
+ <>
+ maxLength: {MAX_LENGTH}
backLength: {backLength}
forwardLength: {forwardLength}
- setValue(e.target.value)} />
-
-
- {isHovering ? 'hover' : 'leaveHover'}
;
};
diff --git a/packages/hooks/src/useHover/demo/demo2.tsx b/packages/hooks/src/useHover/demo/demo2.tsx
index 3d86c391ca..31b0f79d6f 100644
--- a/packages/hooks/src/useHover/demo/demo2.tsx
+++ b/packages/hooks/src/useHover/demo/demo2.tsx
@@ -1,9 +1,9 @@
/**
* title: Pass in DOM element
- * desc: Pass in a function that returns the DOM element.
+ * description: Pass in a function that returns the DOM element.
*
* title.zh-CN: 传入 DOM 元素
- * desc.zh-CN: 传入 function 并返回一个 dom 元素。
+ * description.zh-CN: 传入 function 并返回一个 dom 元素。
*/
import React from 'react';
@@ -17,7 +17,7 @@ export default () => {
onLeave: () => {
console.log('onLeave');
},
- onChange: isHover => {
+ onChange: (isHover) => {
console.log('onChange', isHover);
},
});
diff --git a/packages/hooks/src/useHover/index.en-US.md b/packages/hooks/src/useHover/index.en-US.md
index b56c4808ee..e1bf3e7068 100644
--- a/packages/hooks/src/useHover/index.en-US.md
+++ b/packages/hooks/src/useHover/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useHover
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 10
+toc: content
+demo:
+ cols: 2
---
-# useHover
-
A hook that tracks whether the element is being hovered.
## Examples
-### Default usage
-
-
-
+
scroll here
observer dom
diff --git a/packages/hooks/src/useInViewport/demo/demo2.tsx b/packages/hooks/src/useInViewport/demo/demo2.tsx
index 47787ccde6..0d3893ec57 100644
--- a/packages/hooks/src/useInViewport/demo/demo2.tsx
+++ b/packages/hooks/src/useInViewport/demo/demo2.tsx
@@ -1,9 +1,9 @@
/**
* title: Observe element visible area ratio
- * desc: Pass in `options.threshold`, you can control the ratio to be triggered when the visible area reach every threshold.
`options.root` can control the parent element, in this example, visible will not change relative to the browser viewport. + * description: Pass in `options.threshold`, you can control the ratio to be triggered when the visible area reach every threshold.
`options.root` can control the parent element, in this example, visible will not change relative to the browser viewport. * * title.zh-CN: 监听元素可见区域比例 - * desc.zh-CN: 传入 `options.threshold`, 可以控制在可见区域达到该比例时触发 ratio 更新。
`options.root` 可以控制相对父级元素，在这个例子中，不会相对浏览器视窗变化。 + * description.zh-CN: 传入 `options.threshold`, 可以控制在可见区域达到该比例时触发 ratio 更新。
`options.root` 可以控制相对父级元素，在这个例子中，不会相对浏览器视窗变化。 */ import React from 'react'; @@ -14,19 +14,30 @@ export default () => { threshold: [0, 0.25, 0.5, 0.75, 1], root: () => document.getElementById('parent'), }); + return (();
const [key, setKey] = useState();
- const filterKey = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
useKeyPress(filterKey, (event) => {
setNum(event.key);
});
diff --git a/packages/hooks/src/useKeyPress/demo/demo4.tsx b/packages/hooks/src/useKeyPress/demo/demo4.tsx
index e727afbc2c..2db7082f88 100644
--- a/packages/hooks/src/useKeyPress/demo/demo4.tsx
+++ b/packages/hooks/src/useKeyPress/demo/demo4.tsx
@@ -1,9 +1,9 @@
/**
- * title: Advanced
- * desc: Supports receiving a Boolean callback function to handle preprocessing operations.
+ * title: Custom method
+ * description: Supports receiving a Boolean callback function to handle preprocessing operations.
*
- * title.zh-CN: 进阶使用
- * desc.zh-CN: 支持接收一个返回 boolean 的回调函数，自己处理逻辑。
+ * title.zh-CN: 自定义监听方式
+ * description.zh-CN: 支持接收一个返回 boolean 的回调函数，自己处理逻辑。
*/
import React, { useState } from 'react';
@@ -12,6 +12,7 @@ import { useKeyPress } from 'ahooks';
export default () => {
const [key, setKey] = useState();
const filterKey = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
useKeyPress(
(event) => !filterKey.includes(event.key),
(event) => {
diff --git a/packages/hooks/src/useKeyPress/demo/demo5.tsx b/packages/hooks/src/useKeyPress/demo/demo5.tsx
index 6fc5536a75..71e6bdb8ae 100644
--- a/packages/hooks/src/useKeyPress/demo/demo5.tsx
+++ b/packages/hooks/src/useKeyPress/demo/demo5.tsx
@@ -1,9 +1,9 @@
/**
* title: Custom DOM
- * desc: By default, listen for events on the window. You can also pass in a DOM to set listen area. such as the common listening for input box events.
+ * description: By default, listen for events on the window. You can also pass in a DOM to set listen area. such as the common listening for input box events.
*
* title.zh-CN: 自定义 DOM
- * desc.zh-CN: |
+ * description.zh-CN: |
* 默认监听挂载在 window 上的事件，你也可以传入 DOM 指定监听区域。
*
* 如常见的监听输入框事件，支持多种 DOM 指定方式。
@@ -14,10 +14,10 @@ import { useKeyPress } from 'ahooks';
export default () => {
const inputRef = useRef(null);
-
const [text, setText] = useState('');
const [textRef, setTextRef] = useState('');
const [textSync, setTextSync] = useState('');
+
useKeyPress(
'enter',
(event: any) => {
@@ -58,15 +58,15 @@ export default () => {
);
diff --git a/packages/hooks/src/useKeyPress/demo/demo6.tsx b/packages/hooks/src/useKeyPress/demo/demo6.tsx
index 65a7dc2fb4..817d25fe12 100644
--- a/packages/hooks/src/useKeyPress/demo/demo6.tsx
+++ b/packages/hooks/src/useKeyPress/demo/demo6.tsx
@@ -1,6 +1,14 @@
+/**
+ * title: Combination keys
+ * description:
+ *
+ * title.zh-CN: 监听组合按键
+ * description.zh-CN:
+ */
+
+import React, { useState } from 'react';
import { CheckOutlined } from '@ant-design/icons';
import { useKeyPress } from 'ahooks';
-import React, { useState } from 'react';
export default () => {
const [state, setState] = useState();
diff --git a/packages/hooks/src/useKeyPress/demo/demo7.tsx b/packages/hooks/src/useKeyPress/demo/demo7.tsx
index d107a3203e..18d5d14518 100644
--- a/packages/hooks/src/useKeyPress/demo/demo7.tsx
+++ b/packages/hooks/src/useKeyPress/demo/demo7.tsx
@@ -1,14 +1,14 @@
/**
* title: Exact match
- * desc: Enable exact matching by setting `exactMatch`. For example, press [shift + c], will not trigger [c].
+ * description: Enable exact matching by setting `exactMatch`. For example, press [shift + c], will not trigger [c].
*
* title.zh-CN: 精确匹配
- * desc.zh-CN: 通过配置 `exactMatch`, 开启精确匹配。比如按 [shift + c] ，不会触发 [c]。
+ * description.zh-CN: 通过配置 `exactMatch`, 开启精确匹配。比如按 [shift + c] ，不会触发 [c]。
*/
+import React, { useState } from 'react';
import { CheckOutlined } from '@ant-design/icons';
import { useKeyPress } from 'ahooks';
-import React, { useState } from 'react';
export default () => {
const [state, setState] = useState();
diff --git a/packages/hooks/src/useKeyPress/index.en-US.md b/packages/hooks/src/useKeyPress/index.en-US.md
index a4c9ca1671..cc5bc4ac85 100644
--- a/packages/hooks/src/useKeyPress/index.en-US.md
+++ b/packages/hooks/src/useKeyPress/index.en-US.md
@@ -1,41 +1,26 @@
---
-nav:
- path: /hooks
+title: useKeyPress
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 13
+toc: content
+demo:
+ cols: 2
---
-# useKeyPress
-
Listen for the keyboard press, support key combinations, and support alias.
## Examples
-### Basic usage
-
-
`options.root` can control the parent element, in this example, visible will not change relative to the browser viewport. + * description: Pass in `options.threshold`, you can control the ratio to be triggered when the visible area reach every threshold.
`options.root` can control the parent element, in this example, visible will not change relative to the browser viewport. * * title.zh-CN: 监听元素可见区域比例 - * desc.zh-CN: 传入 `options.threshold`, 可以控制在可见区域达到该比例时触发 ratio 更新。
`options.root` 可以控制相对父级元素，在这个例子中，不会相对浏览器视窗变化。 + * description.zh-CN: 传入 `options.threshold`, 可以控制在可见区域达到该比例时触发 ratio 更新。
`options.root` 可以控制相对父级元素，在这个例子中，不会相对浏览器视窗变化。 */ import React from 'react'; @@ -14,19 +14,30 @@ export default () => { threshold: [0, 0.25, 0.5, 0.75, 1], root: () => document.getElementById('parent'), }); + return (
-
diff --git a/packages/hooks/src/useInfiniteScroll/demo/scroll.tsx b/packages/hooks/src/useInfiniteScroll/demo/scroll.tsx
index d0a04643e8..af2fd793d0 100644
--- a/packages/hooks/src/useInfiniteScroll/demo/scroll.tsx
+++ b/packages/hooks/src/useInfiniteScroll/demo/scroll.tsx
@@ -1,4 +1,5 @@
import React, { useRef } from 'react';
+import { Button } from 'antd';
import { useInfiniteScroll } from 'ahooks';
interface Result {
@@ -38,7 +39,16 @@ export default () => {
);
return (
-
+
diff --git a/packages/hooks/src/useInfiniteScroll/demo/reload.tsx b/packages/hooks/src/useInfiniteScroll/demo/reload.tsx
index d78c3de18e..fbb980c186 100644
--- a/packages/hooks/src/useInfiniteScroll/demo/reload.tsx
+++ b/packages/hooks/src/useInfiniteScroll/demo/reload.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { Button, Input, Space } from 'antd';
import { useInfiniteScroll } from 'ahooks';
interface Result {
@@ -39,12 +40,10 @@ export default () => {
return (
scroll here
diff --git a/packages/hooks/src/useInfiniteScroll/demo/pagination.tsx b/packages/hooks/src/useInfiniteScroll/demo/pagination.tsx
index 747a2f8c6a..8920bd5c51 100644
--- a/packages/hooks/src/useInfiniteScroll/demo/pagination.tsx
+++ b/packages/hooks/src/useInfiniteScroll/demo/pagination.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { Button } from 'antd';
import { useInfiniteScroll } from 'ahooks';
interface Result {
@@ -45,14 +46,12 @@ export default () => {
))}
)}
-
observer dom
diff --git a/packages/hooks/src/useInViewport/demo/demo3.tsx b/packages/hooks/src/useInViewport/demo/demo3.tsx
index 8df73e125e..52a95a3ec0 100644
--- a/packages/hooks/src/useInViewport/demo/demo3.tsx
+++ b/packages/hooks/src/useInViewport/demo/demo3.tsx
@@ -1,12 +1,12 @@
/**
* title: Listening content scrolling selection menu
- * desc: Pass the `callback` that is triggered when the callback of `IntersectionObserver` is called, so you can do some customization.
+ * description: Pass the `callback` that is triggered when the callback of `IntersectionObserver` is called, so you can do some customization.
*
* title.zh-CN: 监听内容滚动选中菜单
- * desc.zh-CN: 传入 `callback`, 使得 `IntersectionObserver` 的回调被调用时，用户可以做一些自定义操作。
+ * description.zh-CN: 传入 `callback`, 使得 `IntersectionObserver` 的回调被调用时，用户可以做一些自定义操作。
*/
-import { useInViewport, useMemoizedFn } from 'ahooks';
import React, { useRef, useState } from 'react';
+import { useInViewport, useMemoizedFn } from 'ahooks';
const menus = ['menu-1', 'menu-2', 'menu-3'];
const content = {
@@ -17,7 +17,6 @@ const content = {
export default () => {
const menuRef = useRef([]);
-
const [activeMenu, setActiveMenu] = useState(menus[0]);
const callback = useMemoizedFn((entry) => {
@@ -46,7 +45,14 @@ export default () => {
return (
)}
-
diff --git a/packages/hooks/src/useInfiniteScroll/demo/mutate.tsx b/packages/hooks/src/useInfiniteScroll/demo/mutate.tsx
index 73c6c97d70..b72980f252 100644
--- a/packages/hooks/src/useInfiniteScroll/demo/mutate.tsx
+++ b/packages/hooks/src/useInfiniteScroll/demo/mutate.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { Button } from 'antd';
import { useInfiniteScroll, useRequest } from 'ahooks';
interface Result {
@@ -63,25 +64,23 @@ export default () => {
{data?.list?.map((item) => (
)}
-
-
diff --git a/packages/hooks/src/useInViewport/index.en-US.md b/packages/hooks/src/useInViewport/index.en-US.md
index 0c2d4ae8d5..91af486458 100644
--- a/packages/hooks/src/useInViewport/index.en-US.md
+++ b/packages/hooks/src/useInViewport/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useInViewport
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 12
+toc: content
+demo:
+ cols: 2
---
-# useInViewport
-
Observe whether the element is in the visible area, and the visible area ratio of the element. More information refer to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
## Examples
-### Default usage
-
-
{data?.nextId && (
-
)}
-
{!data?.nextId && No more data}
item-{item}
-
+
))}
{data?.nextId && (
-
)}
-
{!data?.nextId && No more data}
{hasMore && (
-
)}
-
{!hasMore && No more data}
-
+ setKeyword(e.target.value)} />
+
+
{loading ? (
)}
-
- setKeyword(e.target.value)} />
-
-
+ loading
) : ( @@ -56,14 +55,12 @@ export default () => { ))}
{data?.nextId && (
-
)}
-
{!data?.nextId && No more data}
+
diff --git a/packages/hooks/src/useInfiniteScroll/index.en-US.md b/packages/hooks/src/useInfiniteScroll/index.en-US.md
index b26f5f1f46..7a2db36a2a 100644
--- a/packages/hooks/src/useInfiniteScroll/index.en-US.md
+++ b/packages/hooks/src/useInfiniteScroll/index.en-US.md
@@ -1,10 +1,15 @@
---
-nav:
- path: /hooks
+title: useInfiniteScroll
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 3
+toc: content
+demo:
+ cols: 2
---
-# useInfiniteScroll
-
useInfiniteScroll encapsulates the common infinite scroll logic.
```js
@@ -22,13 +27,13 @@ If the data returned for the first request is `{ list: [1, 2, 3], nextId: 4 }`,
In the first example, we demonstrate the implementation of a most basic infinite scroll.
-
{loading ? (
)}
-
loading
) : ( @@ -50,14 +60,12 @@ export default () => { ))}
{!noMore && (
-
)}
-
{noMore && No more data}
-
+
+
+
+
);
};
diff --git a/packages/hooks/src/useInterval/index.en-US.md b/packages/hooks/src/useInterval/index.en-US.md
index ec9d81b47f..5bded54b2d 100644
--- a/packages/hooks/src/useInterval/index.en-US.md
+++ b/packages/hooks/src/useInterval/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useInterval
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 10
+toc: content
+demo:
+ cols: 2
---
-# useInterval
-
A hook that handles the `setInterval` timer function.
## Examples
-### Default usage
-
-count: {count}
-interval: {interval}
- - - +count: {count}
+interval: {interval}
+Input and pressing enter: {text}
- +Input and pressing enter: {textRef}
- +Input after enter change: {textSync}
- +
-
-### 监听多个按键
-
-count: {count}
-
- );
+ return count: {count}
;
};
diff --git a/packages/hooks/src/useLatest/index.en-US.md b/packages/hooks/src/useLatest/index.en-US.md
index a6a101e9e3..64e1950a5a 100644
--- a/packages/hooks/src/useLatest/index.en-US.md
+++ b/packages/hooks/src/useLatest/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useLatest
+nav: Hooks
+group:
+ title: Advanced
+ order: 7
+order: 5
+toc: content
+demo:
+ cols: 2
---
-# useLatest
-
A Hook that returns the latest value, effectively avoiding the closure problem.
## Examples
-### Basic usage
-
-
+
+
+
{value?.join('-')}
-
-
);
}
diff --git a/packages/hooks/src/useLocalStorageState/demo/demo3.tsx b/packages/hooks/src/useLocalStorageState/demo/demo3.tsx
index c57e2c86ff..a9d721c588 100644
--- a/packages/hooks/src/useLocalStorageState/demo/demo3.tsx
+++ b/packages/hooks/src/useLocalStorageState/demo/demo3.tsx
@@ -1,12 +1,13 @@
/**
* title: Custom serialization and deserialization functions
- * desc: You may not need the default `JSON.stringify/JSON.parse` to serialize string.
+ * description: You may not need the default `JSON.stringify/JSON.parse` to serialize string.
*
* title.zh-CN: 自定义序列化和反序列化函数
- * desc.zh-CN: 对于普通的字符串，可能你不需要默认的 `JSON.stringify/JSON.parse` 来序列化。
+ * description.zh-CN: 对于普通的字符串，可能你不需要默认的 `JSON.stringify/JSON.parse` 来序列化。
*/
import React from 'react';
+import { Button, Input, Space } from 'antd';
import { useLocalStorageState } from 'ahooks';
export default function () {
@@ -20,18 +21,14 @@ export default function () {
);
return (
- <>
-
+ setMessage(e.target.value)}
/>
-
-
-
+
+
+
);
}
diff --git a/packages/hooks/src/useLocalStorageState/index.en-US.md b/packages/hooks/src/useLocalStorageState/index.en-US.md
index 940d23bcd3..e179d19d87 100644
--- a/packages/hooks/src/useLocalStorageState/index.en-US.md
+++ b/packages/hooks/src/useLocalStorageState/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useLocalStorageState
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 6
+toc: content
+demo:
+ cols: 2
---
-# useLocalStorageState
-
A Hook that store state into localStorage.
## Examples
-### Store state into localStorage
-
-((resolve) => {
@@ -30,8 +30,10 @@ export default () => {
return (
<>
- Submit count: {count}
-
+ submit count: {count}
+
);
};
diff --git a/packages/hooks/src/useLockFn/index.en-US.md b/packages/hooks/src/useLockFn/index.en-US.md
index 2275287de3..17831cd059 100644
--- a/packages/hooks/src/useLockFn/index.en-US.md
+++ b/packages/hooks/src/useLockFn/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useLockFn
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 14
+toc: content
+demo:
+ cols: 2
---
-# useLockFn
-
Add lock to an async function to prevent parallel executions.
## Examples
-### Basic usage
-
-counter: {counter}
-
+
+
);
};
diff --git a/packages/hooks/src/useLongPress/demo/demo2.tsx b/packages/hooks/src/useLongPress/demo/demo2.tsx
index dadee3a1e6..68340ce34a 100644
--- a/packages/hooks/src/useLongPress/demo/demo2.tsx
+++ b/packages/hooks/src/useLongPress/demo/demo2.tsx
@@ -1,10 +1,18 @@
+/**
+ * title: Listen for click and long press events at the same time
+ * description:
+ *
+ * title.zh-CN: 同时监听点击和长按事件
+ * description.zh-CN:
+ */
+
import React, { useRef, useState } from 'react';
+import { Button } from 'antd';
import { useLongPress } from 'ahooks';
export default () => {
const [pressCounter, setPressCounter] = useState(0);
const [clickCounter, setClickCounter] = useState(0);
-
const ref = useRef(null);
useLongPress(() => setPressCounter((s) => s + 1), ref, {
@@ -12,12 +20,12 @@ export default () => {
});
return (
-
-
+
+
);
};
diff --git a/packages/hooks/src/useLongPress/demo/demo3.tsx b/packages/hooks/src/useLongPress/demo/demo3.tsx
index 9a68bc37c4..6784c16117 100644
--- a/packages/hooks/src/useLongPress/demo/demo3.tsx
+++ b/packages/hooks/src/useLongPress/demo/demo3.tsx
@@ -1,16 +1,17 @@
/**
- * title: Basic usage
- * desc: After the movement threshold is exceeded, the long press event will not be triggered
+ * title: Move threshold
+ * description: After the movement threshold is exceeded, the long press event will not be triggered.
*
- * title.zh-CN: 超出移动阈值
- * desc.zh-CN: 超出移动阈值之后，长按事件将不会触发
+ * title.zh-CN: 移动阈值
+ * description.zh-CN: 超出移动阈值之后，长按事件将不会触发。
*/
+
import React, { useRef, useState } from 'react';
+import { Button } from 'antd';
import { useLongPress } from 'ahooks';
export default () => {
const [pressCounter, setPressCounter] = useState(0);
-
const ref = useRef(null);
useLongPress(() => setPressCounter((s) => s + 1), ref, {
@@ -18,11 +19,11 @@ export default () => {
});
return (
-
-
+ <>
counter: {pressCounter}
-
+
+
);
};
diff --git a/packages/hooks/src/useLongPress/index.en-US.md b/packages/hooks/src/useLongPress/index.en-US.md
index fc7e6aa2a3..28cb20d197 100644
--- a/packages/hooks/src/useLongPress/index.en-US.md
+++ b/packages/hooks/src/useLongPress/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useLongPress
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 14
+toc: content
+demo:
+ cols: 2
---
-# useLongPress
-
Listen for the long press event of the target element.
## Examples
-### Basic usage
-
-
+
+
+
+
+
{JSON.stringify(Array.from(map), null, 2)}
diff --git a/packages/hooks/src/useMap/index.en-US.md b/packages/hooks/src/useMap/index.en-US.md
index 2ee1a6b7e7..c22186731e 100644
--- a/packages/hooks/src/useMap/index.en-US.md
+++ b/packages/hooks/src/useMap/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useMap
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 10
+toc: content
+demo:
+ cols: 2
---
-# useMap
-
A hook that can manage the state of Map.
## Examples
-### Default usage
-
-count: {count}
-
-
-
-
+
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useMemoizedFn/demo/demo2.tsx b/packages/hooks/src/useMemoizedFn/demo/demo2.tsx
index e8e34f46d1..8363868cb6 100644
--- a/packages/hooks/src/useMemoizedFn/demo/demo2.tsx
+++ b/packages/hooks/src/useMemoizedFn/demo/demo2.tsx
@@ -1,14 +1,27 @@
/**
- * title: useMemoizedFn function reference will not change, which can be used for performance optimization.
- * desc: In the example, `memoizedFn` reference will not change, `callbackFn` will change when count changes.
+ * title: Performance Improvement
+ * description: useMemoizedFn function reference will not change, which can be used for performance optimization.
*
- * title.zh-CN: useMemoizedFn 函数地址不会变化，可以用于性能优化
- * desc.zh-CN: 示例中 `memoizedFn` 是不会变化的，`callbackFn` 在 count 变化时变化。
+ * title.zh-CN: 性能提升
+ * description.zh-CN: useMemoizedFn 函数地址不会变化，可以用于性能优化。
*/
-import { useMemoizedFn } from 'ahooks';
-import { message } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
+import { Button, message } from 'antd';
+import { useMemoizedFn } from 'ahooks';
+
+// some expensive component with React.memo
+const ExpensiveTree = React.memo>(({ showCount }) => {
+ const renderCountRef = useRef(0);
+ renderCountRef.current += 1;
+
+ return (
+
+ Render Count: {renderCountRef.current}
+
+
+ );
+});
export default () => {
const [count, setCount] = useState(0);
@@ -24,16 +37,8 @@ export default () => {
return (
<>
count: {count}
-
-
- You can click the button to see the number of sub-component renderings
+
+ You can click the Button to see the number of sub-component renderings
Component with useCallback function:
@@ -49,18 +54,3 @@ export default () => {
);
};
-
-// some expensive component with React.memo
-const ExpensiveTree = React.memo<{ [key: string]: any }>(({ showCount }) => {
- const renderCountRef = useRef(0);
- renderCountRef.current += 1;
-
- return (
-
- Render Count: {renderCountRef.current}
-
-
- );
-});
diff --git a/packages/hooks/src/useMemoizedFn/index.en-US.md b/packages/hooks/src/useMemoizedFn/index.en-US.md
index 291837f115..48aade0ebf 100644
--- a/packages/hooks/src/useMemoizedFn/index.en-US.md
+++ b/packages/hooks/src/useMemoizedFn/index.en-US.md
@@ -1,10 +1,15 @@
---
-nav:
- path: /hooks
+title: useMemoizedFn
+nav: Hooks
+group:
+ title: Advanced
+ order: 7
+order: 6
+toc: content
+demo:
+ cols: 2
---
-# useMemoizedFn
-
Hooks for persistent functions. In general, useMemoizedFn can be used instead of useCallback. See [FAQ](#faq) for special cases.
In some scenarios, we need to use useCallback to cache a function, but when the second parameter deps changes, the function will be regenerated, causing the function reference to change.
@@ -31,13 +36,8 @@ const func = useMemoizedFn(() => {
## Examples
-### Default usage
-
-
+ Mouse In Element - x: {mouse.elementX}, y: {mouse.elementY}
+
+
+ Element Position - x: {mouse.elementPosX}, y: {mouse.elementPosY}
+
+
+ Element Dimensions - width: {mouse.elementW}, height: {mouse.elementH}
+
+
{
>
element
-
-
- Mouse In Element - x: {mouse.elementX}, y: {mouse.elementY}
-
-
- Element Position - x: {mouse.elementPosX}, y: {mouse.elementPosY}
-
-
- Element Dimensions - width: {mouse.elementW}, height: {mouse.elementH}
-
-
);
};
diff --git a/packages/hooks/src/useMouse/index.en-US.md b/packages/hooks/src/useMouse/index.en-US.md
index 022bc38abb..99bf18f054 100644
--- a/packages/hooks/src/useMouse/index.en-US.md
+++ b/packages/hooks/src/useMouse/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useMouse
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 15
+toc: content
+demo:
+ cols: 2
---
-# useMouse
-
Track cursor position
## Examples
-### Default Usage
-
-(null);
useMutationObserver(
@@ -23,11 +23,22 @@ const App: React.FC = () => {
return (
-
- current width：{width}
+ mutation count: {count}
+
+ current width: {width}
-
- Mutation count {count}
+
);
};
diff --git a/packages/hooks/src/useMutationObserver/index.en-US.md b/packages/hooks/src/useMutationObserver/index.en-US.md
index 18007a762b..e1b9295e0f 100644
--- a/packages/hooks/src/useMutationObserver/index.en-US.md
+++ b/packages/hooks/src/useMutationObserver/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useMutationObserver
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 11
+toc: content
+demo:
+ cols: 2
---
-# useMutationObserver
-
A hook that provides the ability to watch for changes being made to the DOM tree, refer to [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
## Examples
-### Default Usage
-
-{JSON.stringify(networkState, null, 2)}
);
diff --git a/packages/hooks/src/useNetwork/index.en-US.md b/packages/hooks/src/useNetwork/index.en-US.md
index 9930be3ba7..b5cfb4f90c 100644
--- a/packages/hooks/src/useNetwork/index.en-US.md
+++ b/packages/hooks/src/useNetwork/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useNetwork
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 8
+toc: content
+demo:
+ cols: 2
---
-# useNetwork
-
A hook that tracks the state of network connection.
## Examples
-### Default usage
-
-You can click the button multiple times, the conditions of pagination will be cached.
-
+
{state &&
+
+
+
);
};
diff --git a/packages/hooks/src/usePrevious/demo/demo2.tsx b/packages/hooks/src/usePrevious/demo/demo2.tsx
index df0757ab18..4036703c19 100644
--- a/packages/hooks/src/usePrevious/demo/demo2.tsx
+++ b/packages/hooks/src/usePrevious/demo/demo2.tsx
@@ -1,12 +1,13 @@
/**
* title: Custom shouldUpdate function
- * desc: Previous value update only when the shouldUpdate function return true.
+ * description: Previous value update only when the shouldUpdate function return true.
*
* title.zh-CN: 自定义 shouldUpdate 函数
- * desc.zh-CN: 只有 shouldUpdate function 返回 true 时，才会记录值的变化。
+ * description.zh-CN: 只有 shouldUpdate function 返回 true 时，才会记录值的变化。
*/
import React, { useState } from 'react';
+import { Button, Input, Space } from 'antd';
import { usePrevious } from 'ahooks';
interface Person {
@@ -43,46 +44,42 @@ export default () => {
return (
<>
-
+
current name: {state.name}
current job: {state.job}
- previous name: {(previousName || {}).name}
- previous job: {(previousJob || {}).job}
-
-
+ previous name: {(previousName || {}).name}
+ previous job: {(previousJob || {}).job}
+
+
+ setNameInput(e.target.value)}
placeholder="new name"
/>
-
-
-
-
+
+
+ setJobInput(e.target.value)}
placeholder="new job"
/>
-
-
+ Update
+
+
);
};
diff --git a/packages/hooks/src/usePrevious/index.en-US.md b/packages/hooks/src/usePrevious/index.en-US.md
index 1fd9e5ab81..865b3ddc64 100644
--- a/packages/hooks/src/usePrevious/index.en-US.md
+++ b/packages/hooks/src/usePrevious/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: usePrevious
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 12
+toc: content
+demo:
+ cols: 2
---
-# usePrevious
-
A Hook to return the previous state.
## Examples
-### Default usage
-
- count: {count}
- interval: {interval}
-
-
-
-
+ <>
+ count: {count}
+ interval: {interval}
+
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useRafInterval/index.en-US.md b/packages/hooks/src/useRafInterval/index.en-US.md
index d25760dc5b..4792a1c4a8 100644
--- a/packages/hooks/src/useRafInterval/index.en-US.md
+++ b/packages/hooks/src/useRafInterval/index.en-US.md
@@ -1,10 +1,15 @@
---
-nav:
- path: /hooks
+title: useRafInterval
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 11
+toc: content
+demo:
+ cols: 2
---
-# useRafInterval
-
A hook implements with `requestAnimationFrame` for better performance. The API is consistent with `useInterval`, the advantage is that the execution of the timer can be stopped when the page is not rendering, such as page hiding or minimization.
Please note that the following two cases are likely to be inapplicable, and `useInterval` is preferred:
@@ -16,13 +21,8 @@ Please note that the following two cases are likely to be inapplicable, and `use
## Examples
-### Default usage
-
- count: {count}
- Delay: {delay}
-
-
-
+ count: {count}
+ delay: {delay}
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useRafTimeout/index.en-US.md b/packages/hooks/src/useRafTimeout/index.en-US.md
index fbdd05b0cb..3aa50be160 100644
--- a/packages/hooks/src/useRafTimeout/index.en-US.md
+++ b/packages/hooks/src/useRafTimeout/index.en-US.md
@@ -1,23 +1,23 @@
---
-nav:
- path: /hooks
+title: useRafTimeout
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 13
+toc: content
+demo:
+ cols: 2
---
-# useRafTimeout
-
A hook implements with `requestAnimationFrame` for better performance. The API is consistent with `useTimeout`. the advantage is that will not trigger function when the page is not rendering, such as page hiding or minimization.
> `requestAnimationFrame` will automatically downgrade to `setTimeout` in node environment
## Examples
-### Default usage
-
- state.count：{state.count}
-
-
-
+ <>
+ state.count: {state.count}
+
+
+
+
- state.inputVal: {state.inputVal}
- (state.inputVal = e.target.value)} />
+ state.inputVal: {state.inputVal}
+ (state.inputVal = e.target.value)} />
- state.obj.value: {state.obj.value}
- (state.obj.value = e.target.value)} />
-
+ state.obj.value: {state.obj.value}
+ (state.obj.value = e.target.value)} />
+
);
};
diff --git a/packages/hooks/src/useReactive/demo/demo2.tsx b/packages/hooks/src/useReactive/demo/demo2.tsx
index 9e72f1ab0d..1a3341d7a3 100644
--- a/packages/hooks/src/useReactive/demo/demo2.tsx
+++ b/packages/hooks/src/useReactive/demo/demo2.tsx
@@ -1,4 +1,13 @@
+/**
+ * title: Array
+ * description:
+ *
+ * title.zh-CN: 数组操作
+ * description.zh-CN:
+ */
+
import React from 'react';
+import { Button, Space } from 'antd';
import { useReactive } from 'ahooks';
export default () => {
@@ -7,36 +16,33 @@ export default () => {
});
return (
-
+ <>
state.arr: {JSON.stringify(state.arr)}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useReactive/demo/demo3.tsx b/packages/hooks/src/useReactive/demo/demo3.tsx
index 887a7c2c52..221d2fffbf 100644
--- a/packages/hooks/src/useReactive/demo/demo3.tsx
+++ b/packages/hooks/src/useReactive/demo/demo3.tsx
@@ -1,4 +1,13 @@
+/**
+ * title: Computed Properties
+ * description:
+ *
+ * title.zh-CN: 计算属性
+ * description.zh-CN:
+ */
+
import React from 'react';
+import { Button, Input, Space } from 'antd';
import { useReactive } from 'ahooks';
export default () => {
@@ -16,7 +25,6 @@ export default () => {
return (
state.bugsCount: {state.bugsCount}
-
-
-
-
-
+
{state.bugs.map((bug) => (
- {bug}
))}
diff --git a/packages/hooks/src/useReactive/demo/demo4.tsx b/packages/hooks/src/useReactive/demo/demo4.tsx
index b720a13fab..9c5a92cf76 100644
--- a/packages/hooks/src/useReactive/demo/demo4.tsx
+++ b/packages/hooks/src/useReactive/demo/demo4.tsx
@@ -1,10 +1,13 @@
/**
- * desc: useReactive returns a proxy object which always has the same reference. If `useEffect`, `useMemo`, `useCallback` and props passed to child component rely on the proxy, none of the above will be invoked by any changes to the proxy.
+ * title: Notice
+ * description: useReactive returns a proxy object which always has the same reference. If `useEffect`, `useMemo`, `useCallback` and props passed to child component rely on the proxy, none of the above will be invoked by any changes to the proxy.
*
- * desc.zh-CN: useReactive 产生可操作的代理对象一直都是同一个引用，`useEffect` , `useMemo` ,`useCallback` ,`子组件属性传递` 等如果依赖的是这个代理对象是**不会**引起重新执行。
+ * title.zh-CN: 注意
+ * description.zh-CN: useReactive 产生可操作的代理对象一直都是同一个引用，`useEffect` , `useMemo` ,`useCallback` ,`子组件属性传递` 等如果依赖的是这个代理对象是**不会**引起重新执行。
*/
import React, { useEffect, useState } from 'react';
+import { Button } from 'antd';
import { useReactive } from 'ahooks';
export default () => {
@@ -26,15 +29,11 @@ export default () => {
return (
-
- stateCount:{stateCount}
+ stateCount: {stateCount}
+
-
- stateCount2:{stateCount2}
+ stateCount2: {stateCount2}
+
);
};
diff --git a/packages/hooks/src/useReactive/demo/index.tsx b/packages/hooks/src/useReactive/demo/index.tsx
deleted file mode 100644
index 9bbdc89690..0000000000
--- a/packages/hooks/src/useReactive/demo/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { useReactive } from 'ahooks';
-
-export default () => {
- const state = useReactive({
- count: 0,
- val: {
- val1: {
- val2: '',
- },
- },
- arr: [1],
- });
-
- return (
-
-
- counter state.count：{state.count}
-
-
-
-
-
-
-
- state.arr: {JSON.stringify(state.arr)}
-
-
-
-
-
-
-
-
-
- nested structure
- {state.val.val1.val2}
- {
- state.val.val1.val2 = e.target.value;
- }}
- />
-
- );
-};
diff --git a/packages/hooks/src/useReactive/index.en-US.md b/packages/hooks/src/useReactive/index.en-US.md
index 5fa7a6e854..1d82e99b23 100644
--- a/packages/hooks/src/useReactive/index.en-US.md
+++ b/packages/hooks/src/useReactive/index.en-US.md
@@ -1,29 +1,23 @@
---
-nav:
- path: /hooks
+title: useReactive
+nav: Hooks
+group:
+ title: Advanced
+ order: 7
+order: 7
+toc: content
+demo:
+ cols: 2
---
-## useReactive
-
It offers data reactivity when manipulating states and views, in which case `useState` is unnecessary for state definition. Modifying properties will automatically lead to view rerendering.
## Examples
-### Default Usage
-
-);
```
-## Params
+### Params
| Params | Description | Type | Default |
| ------------ | ------------- | --------------------- | ------- |
diff --git a/packages/hooks/src/useReactive/index.zh-CN.md b/packages/hooks/src/useReactive/index.zh-CN.md
index a58290d534..44a6c9b720 100644
--- a/packages/hooks/src/useReactive/index.zh-CN.md
+++ b/packages/hooks/src/useReactive/index.zh-CN.md
@@ -1,29 +1,23 @@
---
-nav:
- path: /hooks
+title: useReactive
+nav: Hooks
+group:
+ title: Advanced
+ order: 7
+order: 7
+toc: content
+demo:
+ cols: 2
---
-## useReactive
-
提供一种数据响应式的操作体验，定义数据状态不需要写`useState`，直接修改属性即可刷新视图。
## 代码演示
-### 基本用法
-
-);
```
-## 参数
+### 参数
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | -------------- | --------------------- | ------ |
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/cancel.tsx b/packages/hooks/src/useRequest/docs/basic/demo/cancel.tsx
similarity index 74%
rename from packages/hooks/src/useRequest/doc/basic/demo/cancel.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/cancel.tsx
index 01e44996c2..176e274644 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/cancel.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/cancel.tsx
@@ -1,5 +1,5 @@
-import { message } from 'antd';
import React, { useState } from 'react';
+import { Button, Input, Space, message } from 'antd';
import { useRequest } from 'ahooks';
function editUsername(username: string): Promise {
@@ -16,7 +16,6 @@ function editUsername(username: string): Promise {
export default () => {
const [state, setState] = useState('');
-
const { loading, run, cancel } = useRequest(editUsername, {
manual: true,
onSuccess: (result, params) => {
@@ -29,19 +28,17 @@ export default () => {
});
return (
-
-
+ setState(e.target.value)}
value={state}
placeholder="Please enter username"
- style={{ width: 240, marginRight: 16 }}
+ style={{ width: 240 }}
/>
-
+
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/default.tsx b/packages/hooks/src/useRequest/docs/basic/demo/default.tsx
similarity index 99%
rename from packages/hooks/src/useRequest/doc/basic/demo/default.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/default.tsx
index e6add661fd..cb9d27e01a 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/default.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/default.tsx
@@ -29,5 +29,6 @@ export default () => {
if (loading) {
return loading...;
}
+
return Username: {data};
};
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/lifeCycle.tsx b/packages/hooks/src/useRequest/docs/basic/demo/lifeCycle.tsx
similarity index 83%
rename from packages/hooks/src/useRequest/doc/basic/demo/lifeCycle.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/lifeCycle.tsx
index 429fc4904f..17302813e1 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/lifeCycle.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/lifeCycle.tsx
@@ -1,5 +1,5 @@
-import { message } from 'antd';
import React, { useState } from 'react';
+import { Button, Input, Space, message } from 'antd';
import { useRequest } from 'ahooks';
function editUsername(username: string): Promise {
@@ -16,7 +16,6 @@ function editUsername(username: string): Promise {
export default () => {
const [state, setState] = useState('');
-
const { loading, run } = useRequest(editUsername, {
manual: true,
onBefore: (params) => {
@@ -35,16 +34,16 @@ export default () => {
});
return (
-
-
+ setState(e.target.value)}
value={state}
placeholder="Please enter username"
- style={{ width: 240, marginRight: 16 }}
+ style={{ width: 240 }}
/>
-
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/manual-run.tsx b/packages/hooks/src/useRequest/docs/basic/demo/manual-run.tsx
similarity index 65%
rename from packages/hooks/src/useRequest/doc/basic/demo/manual-run.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/manual-run.tsx
index a580a05e15..f118b555dc 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/manual-run.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/manual-run.tsx
@@ -1,13 +1,13 @@
/**
* title: Edit username
- * desc: In this example, we use `run(username)` to edit the username, and use `onSuccess` and `onError` to handle success and failure.
+ * description: In this example, we use `run(username)` to edit the username, and use `onSuccess` and `onError` to handle success and failure.
*
* title.zh-CN: 修改用户名
- * desc.zh-CN: 在这个例子中，我们通过 `run(username)` 来修改用户名，通过 `onSuccess` 和 `onError` 来处理成功和失败。
+ * description.zh-CN: 在这个例子中，我们通过 `run(username)` 来修改用户名，通过 `onSuccess` 和 `onError` 来处理成功和失败。
*/
-import { message } from 'antd';
import React, { useState } from 'react';
+import { Button, Input, Space, message } from 'antd';
import { useRequest } from 'ahooks';
function editUsername(username: string): Promise {
@@ -24,7 +24,6 @@ function editUsername(username: string): Promise {
export default () => {
const [state, setState] = useState('');
-
const { loading, run } = useRequest(editUsername, {
manual: true,
onSuccess: (result, params) => {
@@ -37,16 +36,16 @@ export default () => {
});
return (
-
-
+ setState(e.target.value)}
value={state}
placeholder="Please enter username"
- style={{ width: 240, marginRight: 16 }}
+ style={{ width: 240 }}
/>
-
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/manual-runAsync.tsx b/packages/hooks/src/useRequest/docs/basic/demo/manual-runAsync.tsx
similarity index 67%
rename from packages/hooks/src/useRequest/doc/basic/demo/manual-runAsync.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/manual-runAsync.tsx
index 4eb941b875..d22ba246f1 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/manual-runAsync.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/manual-runAsync.tsx
@@ -1,13 +1,13 @@
/**
* title: Edit username
- * desc: In this example, we use `runAsync(username)` to edit the user name. At this time, we must catch the exception through catch.
+ * description: In this example, we use `runAsync(username)` to edit the user name. At this time, we must catch the exception through catch.
*
* title.zh-CN: 修改用户名
- * desc.zh-CN: 在这个例子中，我们通过 `runAsync(username)` 来修改用户名，此时必须通过 catch 来自行处理异常。
+ * description.zh-CN: 在这个例子中，我们通过 `runAsync(username)` 来修改用户名，此时必须通过 catch 来自行处理异常。
*/
-import { message } from 'antd';
import React, { useState } from 'react';
+import { Button, Input, Space, message } from 'antd';
import { useRequest } from 'ahooks';
function editUsername(username: string): Promise {
@@ -24,7 +24,6 @@ function editUsername(username: string): Promise {
export default () => {
const [state, setState] = useState('');
-
const { loading, runAsync } = useRequest(editUsername, {
manual: true,
});
@@ -40,16 +39,16 @@ export default () => {
};
return (
-
-
+ setState(e.target.value)}
value={state}
placeholder="Please enter username"
- style={{ width: 240, marginRight: 16 }}
+ style={{ width: 240 }}
/>
-
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/mutate.tsx b/packages/hooks/src/useRequest/docs/basic/demo/mutate.tsx
similarity index 79%
rename from packages/hooks/src/useRequest/doc/basic/demo/mutate.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/mutate.tsx
index 8e103e2110..61f8cb16f0 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/mutate.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/mutate.tsx
@@ -4,10 +4,10 @@
* title.zh-CN: 修改用户名
*/
-import { message } from 'antd';
import React, { useState, useRef } from 'react';
-import { useRequest } from 'ahooks';
import Mock from 'mockjs';
+import { Button, Input, Space, message } from 'antd';
+import { useRequest } from 'ahooks';
function getUsername(): Promise {
return new Promise((resolve) => {
@@ -32,7 +32,6 @@ function editUsername(username: string): Promise {
export default () => {
// store last username
const lastRef = useRef();
-
const [state, setState] = useState('');
// get username
@@ -60,15 +59,15 @@ export default () => {
return (
Username: {username}
- setState(e.target.value)}
- value={state}
- placeholder="Please enter username"
- style={{ width: 240, marginRight: 16 }}
- />
-
+
+ setState(e.target.value)}
+ value={state}
+ placeholder="Please enter username"
+ style={{ width: 240 }}
+ />
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/params.tsx b/packages/hooks/src/useRequest/docs/basic/demo/params.tsx
similarity index 61%
rename from packages/hooks/src/useRequest/doc/basic/demo/params.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/params.tsx
index da3763468e..8f64e7bca2 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/params.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/params.tsx
@@ -1,6 +1,7 @@
-import { useRequest } from 'ahooks';
-import Mock from 'mockjs';
import React, { useState } from 'react';
+import Mock from 'mockjs';
+import { useRequest } from 'ahooks';
+import { Button, Input, Space } from 'antd';
function getUsername(id: string): Promise {
return new Promise((resolve) => {
@@ -12,7 +13,6 @@ function getUsername(id: string): Promise {
export default () => {
const [state, setState] = useState('');
-
// get username
const {
data: username,
@@ -28,17 +28,17 @@ export default () => {
return (
- setState(e.target.value)}
- value={state}
- placeholder="Please enter userId"
- style={{ width: 240, marginRight: 16 }}
- />
-
- UserId: {params[0]}
+ UserId: {params[0]}
Username: {username}
+
+ setState(e.target.value)}
+ value={state}
+ placeholder="Please enter userId"
+ style={{ width: 240 }}
+ />
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/basic/demo/refresh.tsx b/packages/hooks/src/useRequest/docs/basic/demo/refresh.tsx
similarity index 82%
rename from packages/hooks/src/useRequest/doc/basic/demo/refresh.tsx
rename to packages/hooks/src/useRequest/docs/basic/demo/refresh.tsx
index 099e8a0ee7..eac16ee230 100644
--- a/packages/hooks/src/useRequest/doc/basic/demo/refresh.tsx
+++ b/packages/hooks/src/useRequest/docs/basic/demo/refresh.tsx
@@ -4,9 +4,10 @@
* title.zh-CN: 刷新用户名称
*/
-import { useRequest } from 'ahooks';
-import Mock from 'mockjs';
import React, { useEffect } from 'react';
+import Mock from 'mockjs';
+import { Button } from 'antd';
+import { useRequest } from 'ahooks';
function getUsername(id: number): Promise {
console.log('use-request-refresh-id', id);
@@ -29,12 +30,11 @@ export default () => {
if (loading) {
return loading...;
}
+
return (
- Username: {data}
-
+ Username: {data}
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/basic/basic.en-US.md b/packages/hooks/src/useRequest/docs/basic/index.en-US.md
similarity index 92%
rename from packages/hooks/src/useRequest/doc/basic/basic.en-US.md
rename to packages/hooks/src/useRequest/docs/basic/index.en-US.md
index 330719c1f7..e7bcd3befa 100644
--- a/packages/hooks/src/useRequest/doc/basic/basic.en-US.md
+++ b/packages/hooks/src/useRequest/docs/basic/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Basic Usage
+nav: Hooks
+group: useRequest
+order: 2
+toc: content
+demo:
+ cols: 2
---
-# Basic usage
-
In this section, we will introduce the core and basic functionalities of `useRequest`, that is, the functionalities of the `useRequest` kernel.
## Default request
@@ -19,7 +20,7 @@ const { data, error, loading } = useRequest(service);
-- Manually trigger the execution of the service, and the parameters will be passed to the service
- Automatic handling of exceptions, feedback through `onError`
| `(...params : TParams) => void` |
-| runAsync | The usage is the same as `run`, but it returns a Promise, so you need to handle the exception yourself. | `(...params: TParams) => Promise` |
-| refresh | Use the last params, call `run` again | `() => void` |
-| refreshAsync | Use the last params, call `runAsync` again | `() => Promise` |
-| mutate | Mutate `data` directly | `(data?: TData / ((oldData?: TData) => (TData / undefined))) => void` |
-| cancel | Ignore the current promise response | `() => void` |
+| Property | Description | Type |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| data | Data returned by service | `TData` \| `undefined` |
+| error | Exception thrown by service | `Error` \| `undefined` |
+| loading | Is the service being executed | `boolean` |
+| params | An array of parameters for the service being executed. For example, you triggered `run(1, 2, 3)`, then params is equal to `[1, 2, 3]` | `TParams` \| `[]` |
+| run | - Manually trigger the execution of the service, and the parameters will be passed to the service
- Automatic handling of exceptions, feedback through `onError`
| `(...params : TParams) => void` |
+| runAsync | The usage is the same as `run`, but it returns a Promise, so you need to handle the exception yourself. | `(...params: TParams) => Promise` |
+| refresh | Use the last params, call `run` again | `() => void` |
+| refreshAsync | Use the last params, call `runAsync` again | `() => Promise` |
+| mutate | Mutate `data` directly | `(data?: TData \| ((oldData?: TData) => (TData \| undefined))) => void` |
+| cancel | Ignore the current promise response | `() => void` |
### Options
diff --git a/packages/hooks/src/useRequest/doc/basic/basic.zh-CN.md b/packages/hooks/src/useRequest/docs/basic/index.zh-CN.md
similarity index 92%
rename from packages/hooks/src/useRequest/doc/basic/basic.zh-CN.md
rename to packages/hooks/src/useRequest/docs/basic/index.zh-CN.md
index 8dcfda3ac4..577081c56a 100644
--- a/packages/hooks/src/useRequest/doc/basic/basic.zh-CN.md
+++ b/packages/hooks/src/useRequest/docs/basic/index.zh-CN.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: 基础用法
+nav: Hooks
+group: useRequest
+order: 2
+toc: content
+demo:
+ cols: 2
---
-# 基础用法
-
这一小节我们会介绍 `useRequest` 最核心，最基础的能力，也就是 `useRequest` 内核的能力。
## 默认请求
@@ -19,7 +20,7 @@ const { data, error, loading } = useRequest(service);
-- 手动触发 service 执行，参数会传递给 service
- 异常自动处理，通过 `onError` 反馈
| `(...params: TParams) => void` |
-| runAsync | 与 `run` 用法一致，但返回的是 Promise，需要自行处理异常。 | `(...params: TParams) => Promise` |
-| refresh | 使用上一次的 params，重新调用 `run` | `() => void` |
-| refreshAsync | 使用上一次的 params，重新调用 `runAsync` | `() => Promise` |
-| mutate | 直接修改 `data` | `(data?: TData / ((oldData?: TData) => (TData / undefined))) => void` |
-| cancel | 忽略当前 Promise 的响应 | `() => void` |
+| 参数 | 说明 | 类型 |
+| ------------ | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| data | service 返回的数据 | `TData` \| `undefined` |
+| error | service 抛出的异常 | `Error` \| `undefined` |
+| loading | service 是否正在执行 | `boolean` |
+| params | 当次执行的 service 的参数数组。比如你触发了 `run(1, 2, 3)`，则 params 等于 `[1, 2, 3]` | `TParams` \| `[]` |
+| run | - 手动触发 service 执行，参数会传递给 service
- 异常自动处理，通过 `onError` 反馈
| `(...params: TParams) => void` |
+| runAsync | 与 `run` 用法一致，但返回的是 Promise，需要自行处理异常。 | `(...params: TParams) => Promise` |
+| refresh | 使用上一次的 params，重新调用 `run` | `() => void` |
+| refreshAsync | 使用上一次的 params，重新调用 `runAsync` | `() => Promise` |
+| mutate | 直接修改 `data` | `(data?: TData \| ((oldData?: TData) => (TData \| undefined))) => void` |
+| cancel | 忽略当前 Promise 的响应 | `() => void` |
### Options
diff --git a/packages/hooks/src/useRequest/doc/cache/demo/cacheKey.tsx b/packages/hooks/src/useRequest/docs/cache/demo/cacheKey.tsx
similarity index 81%
rename from packages/hooks/src/useRequest/doc/cache/demo/cacheKey.tsx
rename to packages/hooks/src/useRequest/docs/cache/demo/cacheKey.tsx
index 22fb310299..a5787313dd 100644
--- a/packages/hooks/src/useRequest/doc/cache/demo/cacheKey.tsx
+++ b/packages/hooks/src/useRequest/docs/cache/demo/cacheKey.tsx
@@ -1,7 +1,7 @@
-import { useBoolean } from 'ahooks';
-import Mock from 'mockjs';
import React from 'react';
-import { useRequest } from 'ahooks';
+import Mock from 'mockjs';
+import { Button } from 'antd';
+import { useBoolean, useRequest } from 'ahooks';
async function getArticle(): Promise<{ data: string; time: number }> {
console.log('cacheKey');
@@ -19,9 +19,11 @@ const Article = () => {
const { data, loading } = useRequest(getArticle, {
cacheKey: 'cacheKey-demo',
});
+
if (!data && loading) {
return Loading
;
}
+
return (
<>
Background loading: {loading ? 'true' : 'false'}
@@ -33,11 +35,12 @@ const Article = () => {
export default () => {
const [state, { toggle }] = useBoolean();
+
return (
-
+
{state && }
);
diff --git a/packages/hooks/src/useRequest/doc/cache/demo/clearCache.tsx b/packages/hooks/src/useRequest/docs/cache/demo/clearCache.tsx
similarity index 66%
rename from packages/hooks/src/useRequest/doc/cache/demo/clearCache.tsx
rename to packages/hooks/src/useRequest/docs/cache/demo/clearCache.tsx
index 0d036d30ef..f0b4473072 100644
--- a/packages/hooks/src/useRequest/doc/cache/demo/clearCache.tsx
+++ b/packages/hooks/src/useRequest/docs/cache/demo/clearCache.tsx
@@ -1,7 +1,7 @@
-import Mock from 'mockjs';
import React from 'react';
+import Mock from 'mockjs';
+import { Button, Space, message } from 'antd';
import { useRequest, clearCache, useBoolean } from 'ahooks';
-import { message } from 'antd';
async function getArticle(): Promise<{ data: string; time: number }> {
return new Promise((resolve) => {
@@ -18,9 +18,11 @@ const Article = ({ cacheKey }) => {
const { data, loading } = useRequest(getArticle, {
cacheKey,
});
+
if (!data && loading) {
return Loading
;
}
+
return (
<>
Background loading: {loading ? 'true' : 'false'}
@@ -38,25 +40,18 @@ const clear = (cacheKey?: string | string[]) => {
export default () => {
const [state, { toggle }] = useBoolean();
+
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
Article 1
{state && }
Article 2
diff --git a/packages/hooks/src/useRequest/doc/cache/demo/params.tsx b/packages/hooks/src/useRequest/docs/cache/demo/params.tsx
similarity index 63%
rename from packages/hooks/src/useRequest/doc/cache/demo/params.tsx
rename to packages/hooks/src/useRequest/docs/cache/demo/params.tsx
index a6bf62a03b..67368dc904 100644
--- a/packages/hooks/src/useRequest/doc/cache/demo/params.tsx
+++ b/packages/hooks/src/useRequest/docs/cache/demo/params.tsx
@@ -1,7 +1,7 @@
-import { useBoolean } from 'ahooks';
-import useRequest from '../../../';
-import Mock from 'mockjs';
import React, { useState } from 'react';
+import Mock from 'mockjs';
+import { Button, Input, Space } from 'antd';
+import { useRequest, useBoolean } from 'ahooks';
async function getArticle(keyword: string): Promise<{ data: string; time: number }> {
console.log('cacheKey', keyword);
@@ -19,44 +19,34 @@ const Article = () => {
const { data, params, loading, run } = useRequest(getArticle, {
cacheKey: 'cacheKey-demo',
});
-
const [keyword, setKeyword] = useState(params[0] || '');
if (!data && loading) {
return Loading
;
}
+
return (
- <>
-
- setKeyword(e.target.value)}
- />
-
-
+
+
+ setKeyword(e.target.value)} />
+
+
Background loading: {loading ? 'true' : 'false'}
Latest request time: {data?.time}
Keyword: {keyword}
{data?.data}
-
+
);
};
export default () => {
const [state, { toggle }] = useBoolean();
+
return (
-
+
{state && }
);
diff --git a/packages/hooks/src/useRequest/doc/cache/demo/setCache.tsx b/packages/hooks/src/useRequest/docs/cache/demo/setCache.tsx
similarity index 76%
rename from packages/hooks/src/useRequest/doc/cache/demo/setCache.tsx
rename to packages/hooks/src/useRequest/docs/cache/demo/setCache.tsx
index 78c2d84594..e0796aa646 100644
--- a/packages/hooks/src/useRequest/doc/cache/demo/setCache.tsx
+++ b/packages/hooks/src/useRequest/docs/cache/demo/setCache.tsx
@@ -1,7 +1,7 @@
-import { useBoolean } from 'ahooks';
-import Mock from 'mockjs';
import React from 'react';
-import { useRequest } from 'ahooks';
+import Mock from 'mockjs';
+import { Button } from 'antd';
+import { useRequest, useBoolean } from 'ahooks';
async function getArticle(): Promise<{ data: string; time: number }> {
return new Promise((resolve) => {
@@ -19,12 +19,14 @@ const cacheKey = 'setCache-demo';
const Article = () => {
const { data, loading } = useRequest(getArticle, {
cacheKey,
- setCache: (data) => localStorage.setItem(cacheKey, JSON.stringify(data)),
+ setCache: (value) => localStorage.setItem(cacheKey, JSON.stringify(value)),
getCache: () => JSON.parse(localStorage.getItem(cacheKey) || '{}'),
});
+
if (!data && loading) {
return Loading
;
}
+
return (
<>
Background loading: {loading ? 'true' : 'false'}
@@ -36,11 +38,12 @@ const Article = () => {
export default () => {
const [state, { toggle }] = useBoolean();
+
return (
-
+
{state && }
);
diff --git a/packages/hooks/src/useRequest/doc/cache/demo/share.tsx b/packages/hooks/src/useRequest/docs/cache/demo/share.tsx
similarity index 85%
rename from packages/hooks/src/useRequest/doc/cache/demo/share.tsx
rename to packages/hooks/src/useRequest/docs/cache/demo/share.tsx
index 0969695ea2..d417dee061 100644
--- a/packages/hooks/src/useRequest/doc/cache/demo/share.tsx
+++ b/packages/hooks/src/useRequest/docs/cache/demo/share.tsx
@@ -1,5 +1,6 @@
-import Mock from 'mockjs';
import React from 'react';
+import Mock from 'mockjs';
+import { Button, Divider } from 'antd';
import { useRequest } from 'ahooks';
async function getArticle(): Promise<{ data: string; time: number }> {
@@ -18,17 +19,17 @@ const Article = () => {
const { data, loading, refresh } = useRequest(getArticle, {
cacheKey: 'cacheKey-share',
});
+
if (!data && loading) {
return Loading
;
}
+
return (
<>
Background loading: {loading ? 'true' : 'false'}
-
-
-
+
Latest request time: {data?.time}
{data?.data}
@@ -40,6 +41,7 @@ export default () => {
Article 1
+ Article 2
diff --git a/packages/hooks/src/useRequest/doc/cache/demo/staleTime.tsx b/packages/hooks/src/useRequest/docs/cache/demo/staleTime.tsx
similarity index 81%
rename from packages/hooks/src/useRequest/doc/cache/demo/staleTime.tsx
rename to packages/hooks/src/useRequest/docs/cache/demo/staleTime.tsx
index ff691c7db4..37544b7bcc 100644
--- a/packages/hooks/src/useRequest/doc/cache/demo/staleTime.tsx
+++ b/packages/hooks/src/useRequest/docs/cache/demo/staleTime.tsx
@@ -1,7 +1,7 @@
-import { useBoolean } from 'ahooks';
-import Mock from 'mockjs';
import React from 'react';
-import { useRequest } from 'ahooks';
+import Mock from 'mockjs';
+import { Button } from 'antd';
+import { useRequest, useBoolean } from 'ahooks';
async function getArticle(): Promise<{ data: string; time: number }> {
console.log('cacheKey-staleTime');
@@ -20,9 +20,11 @@ const Article = () => {
cacheKey: 'staleTime-demo',
staleTime: 5000,
});
+
if (!data && loading) {
return Loading
;
}
+
return (
<>
Background loading: {loading ? 'true' : 'false'}
@@ -34,11 +36,12 @@ const Article = () => {
export default () => {
const [state, { toggle }] = useBoolean();
+
return (
-
+
{state && }
);
diff --git a/packages/hooks/src/useRequest/doc/cache/cache.en-US.md b/packages/hooks/src/useRequest/docs/cache/index.en-US.md
similarity index 92%
rename from packages/hooks/src/useRequest/doc/cache/cache.en-US.md
rename to packages/hooks/src/useRequest/docs/cache/index.en-US.md
index 58dce1b057..df8f4dfb82 100644
--- a/packages/hooks/src/useRequest/doc/cache/cache.en-US.md
+++ b/packages/hooks/src/useRequest/docs/cache/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Cache & SWR
+nav: Hooks
+group: useRequest
+order: 10
+toc: content
+demo:
+ cols: 2
---
-# Cache & SWR
-
If `options.cacheKey` is set, `useRequest` will cache the successful data . The next time the component is initialized, if there is cached data, we will return the cached data first, and then send a new request in background, which is the ability of SWR.
You can set the data retention time through `options.staleTime`. During this time, we consider the data to be fresh and will not re-initiate the request.
@@ -15,19 +16,19 @@ You can also set the data cache time through `options.cacheTime`, after this tim
Next, through a few examples to experience these features.
-### SWR
+## SWR
In the following example, we set the `cacheKey`. When the component is loaded for the second time, the cached content will be returned first, and then the request will be re-run in background. You can experience the effect by clicking the button.
-loading
) : (
-
- {data?.map((i) => (
- - {i}
- ))}
-
+ {data?.map((i) => - {i}
)}
)}
);
diff --git a/packages/hooks/src/useRequest/doc/debounce/debounce.en-US.md b/packages/hooks/src/useRequest/docs/debounce/index.en-US.md
similarity index 93%
rename from packages/hooks/src/useRequest/doc/debounce/debounce.en-US.md
rename to packages/hooks/src/useRequest/docs/debounce/index.en-US.md
index 5d725e58c4..94fa804f4a 100644
--- a/packages/hooks/src/useRequest/doc/debounce/debounce.en-US.md
+++ b/packages/hooks/src/useRequest/docs/debounce/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Debounce
+nav: Hooks
+group: useRequest
+order: 8
+toc: content
+demo:
+ cols: 2
---
-# Debounce
-
Enter the debounce mode by setting `options.debounceWait`. At this time, if `run` or `runAsync` is triggered frequently, the request will be executed with the debounce strategy.
```tsx | pure
@@ -20,7 +21,7 @@ As in the example code above, if `run` is triggered frequently, it will only wai
You can quickly enter text in the input box below to experience the effect
-
-
-
-
- {
return new Promise((resolve) => {
@@ -12,7 +13,6 @@ function getUsername(): Promise {
export default () => {
const action = useRequest(getUsername);
-
const withLoadingDelayAction = useRequest(getUsername, {
loadingDelay: 300,
});
@@ -24,16 +24,13 @@ export default () => {
return (
-
-
-
- Username: {action.loading ? 'Loading...' : action.data}
-
+ Username: {action.loading ? 'Loading...' : action.data}
Username: {withLoadingDelayAction.loading ? 'Loading...' : withLoadingDelayAction.data}
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/loadingDelay/loadingDelay.en-US.md b/packages/hooks/src/useRequest/docs/loadingDelay/index.en-US.md
similarity index 86%
rename from packages/hooks/src/useRequest/doc/loadingDelay/loadingDelay.en-US.md
rename to packages/hooks/src/useRequest/docs/loadingDelay/index.en-US.md
index f20b0b6cd0..c4b4dfccb3 100644
--- a/packages/hooks/src/useRequest/doc/loadingDelay/loadingDelay.en-US.md
+++ b/packages/hooks/src/useRequest/docs/loadingDelay/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Loading Delay
+nav: Hooks
+group: useRequest
+order: 3
+toc: content
+demo:
+ cols: 2
---
-# Loading Delay
-
By setting `options.loadingDelay`, you can delay the time when `loading` turns to `true`, effectively prevent UI flashing.
```tsx | pure
@@ -21,7 +22,7 @@ For example, in the above scenario, if `getUsername` returns within 300ms, `load
You can quickly click the button in the example below to experience the effect
-((resolve) => {
setTimeout(() => {
resolve(Mock.mock('@name'));
}, 1000);
@@ -20,12 +21,10 @@ export default () => {
return (
<>
Username: {loading ? 'Loading' : data}
-
-
+
+
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/polling/demo/pollingError.tsx b/packages/hooks/src/useRequest/docs/polling/demo/pollingError.tsx
similarity index 70%
rename from packages/hooks/src/useRequest/doc/polling/demo/pollingError.tsx
rename to packages/hooks/src/useRequest/docs/polling/demo/pollingError.tsx
index 3e597c800f..7595b3849d 100644
--- a/packages/hooks/src/useRequest/doc/polling/demo/pollingError.tsx
+++ b/packages/hooks/src/useRequest/docs/polling/demo/pollingError.tsx
@@ -1,11 +1,11 @@
-import { useRequest } from 'ahooks';
import React from 'react';
import Mock from 'mockjs';
-import { message } from 'antd';
+import { Button, Space, message } from 'antd';
+import { useRequest } from 'ahooks';
function getUsername() {
console.log('polling getUsername Error');
- return new Promise((resolve, reject) => {
+ return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error(Mock.mock('@name')));
}, 1000);
@@ -26,12 +26,10 @@ export default () => {
return (
<>
Username: {loading ? 'Loading' : data}
-
-
+
+
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/polling/polling.en-US.md b/packages/hooks/src/useRequest/docs/polling/index.en-US.md
similarity index 94%
rename from packages/hooks/src/useRequest/doc/polling/polling.en-US.md
rename to packages/hooks/src/useRequest/docs/polling/index.en-US.md
index 56c69db578..b8c6d6c4aa 100644
--- a/packages/hooks/src/useRequest/doc/polling/polling.en-US.md
+++ b/packages/hooks/src/useRequest/docs/polling/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Polling
+nav: Hooks
+group: useRequest
+order: 4
+toc: content
+demo:
+ cols: 2
---
-# Polling
-
By setting `options.pollingInterval`, enter the polling mode, `useRequest` will periodically trigger service execution.
```tsx | pure
@@ -19,7 +20,7 @@ For example, in the above scenario, `getUsername` will be requested every 3000ms
You can experience the effect through the following example
-((resolve) => {
setTimeout(() => {
resolve(Mock.mock('@name'));
}, 1000);
@@ -12,26 +13,21 @@ function getUsername() {
export default () => {
const [ready, { toggle }] = useToggle(false);
-
const { data, loading, run } = useRequest(getUsername, {
ready,
manual: true,
});
return (
- <>
-
- Ready: {JSON.stringify(ready)}
-
-
-
+
+
Username: {loading ? 'Loading' : data}
-
-
-
+
+
+
+ Ready: {JSON.stringify(ready)}
+
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/ready/demo/ready.tsx b/packages/hooks/src/useRequest/docs/ready/demo/ready.tsx
similarity index 71%
rename from packages/hooks/src/useRequest/doc/ready/demo/ready.tsx
rename to packages/hooks/src/useRequest/docs/ready/demo/ready.tsx
index 795db15a9a..1ac86cbed5 100644
--- a/packages/hooks/src/useRequest/doc/ready/demo/ready.tsx
+++ b/packages/hooks/src/useRequest/docs/ready/demo/ready.tsx
@@ -1,9 +1,10 @@
-import { useRequest, useToggle } from 'ahooks';
-import Mock from 'mockjs';
import React from 'react';
+import Mock from 'mockjs';
+import { Button, Space } from 'antd';
+import { useRequest, useToggle } from 'ahooks';
function getUsername() {
- return new Promise((resolve) => {
+ return new Promise((resolve) => {
setTimeout(() => {
resolve(Mock.mock('@name'));
}, 1000);
@@ -12,20 +13,17 @@ function getUsername() {
export default () => {
const [ready, { toggle }] = useToggle(false);
-
const { data, loading } = useRequest(getUsername, {
ready,
});
return (
- <>
-
- Ready: {JSON.stringify(ready)}
-
-
+
Username: {loading ? 'Loading' : data}
-
+
+ Ready: {JSON.stringify(ready)}
+
+
+
);
};
diff --git a/packages/hooks/src/useRequest/doc/ready/ready.en-US.md b/packages/hooks/src/useRequest/docs/ready/index.en-US.md
similarity index 86%
rename from packages/hooks/src/useRequest/doc/ready/ready.en-US.md
rename to packages/hooks/src/useRequest/docs/ready/index.en-US.md
index 0e3d6b0caa..3d21fc0524 100644
--- a/packages/hooks/src/useRequest/doc/ready/ready.en-US.md
+++ b/packages/hooks/src/useRequest/docs/ready/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Ready
+nav: Hooks
+group: useRequest
+order: 5
+toc: content
+demo:
+ cols: 2
---
-# Ready
-
By setting `options.ready`, you can control whether a request is sent. When its value is `false`, the request will never be sent.
The specific behavior is as follows:
@@ -18,13 +19,13 @@ The specific behavior is as follows:
The following example demonstrates the behavior of `ready` in automatic mode. Every time `ready` changes from `false` to `true`, the request will be executed.
-((resolve) => {
setTimeout(() => {
resolve(Mock.mock('@name'));
}, 1000);
diff --git a/packages/hooks/src/useRequest/doc/refreshOnWindowFocus/refreshOnWindowFocus.en-US.md b/packages/hooks/src/useRequest/docs/refreshOnWindowFocus/index.en-US.md
similarity index 88%
rename from packages/hooks/src/useRequest/doc/refreshOnWindowFocus/refreshOnWindowFocus.en-US.md
rename to packages/hooks/src/useRequest/docs/refreshOnWindowFocus/index.en-US.md
index 16de18cb19..fe8db3c62d 100644
--- a/packages/hooks/src/useRequest/doc/refreshOnWindowFocus/refreshOnWindowFocus.en-US.md
+++ b/packages/hooks/src/useRequest/docs/refreshOnWindowFocus/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Refresh on Window Focus
+nav: Hooks
+group: useRequest
+order: 7
+toc: content
+demo:
+ cols: 2
---
-# RefreshOnWindowFocus
-
By setting `options.refreshOnWindowFocus`, the request will be refreshed when the browser is `refocus` and `revisible`.
```tsx | pure
@@ -17,7 +18,7 @@ const { data } = useRequest(getUsername, {
You can click outside the browser, and then click the current page to experience the effect (or hide the current page and redisplay). If the interval from the previous request is greater than 5000ms, it will be requested again.
- {
console.log('throttle getEmail', search);
@@ -19,15 +20,11 @@ export default () => {
return (
- run(e.target.value)} />
+ run(e.target.value)} />
{loading ? (
- loading
+ loading
) : (
-
- {data?.map((i) => (
- - {i}
- ))}
-
+ {data?.map((i) => - {i}
)}
)}
);
diff --git a/packages/hooks/src/useRequest/doc/throttle/throttle.en-US.md b/packages/hooks/src/useRequest/docs/throttle/index.en-US.md
similarity index 92%
rename from packages/hooks/src/useRequest/doc/throttle/throttle.en-US.md
rename to packages/hooks/src/useRequest/docs/throttle/index.en-US.md
index 65c6f37619..da4b94799e 100644
--- a/packages/hooks/src/useRequest/doc/throttle/throttle.en-US.md
+++ b/packages/hooks/src/useRequest/docs/throttle/index.en-US.md
@@ -1,12 +1,13 @@
---
-nav:
- path: /hooks
-group:
- path: /use-request
+title: Throttle
+nav: Hooks
+group: useRequest
+order: 9
+toc: content
+demo:
+ cols: 2
---
-# Throttle
-
Enter the throttle mode by setting `options.throttleWait`. At this time, if `run` or `runAsync` is triggered frequently, the request will be executed with the throttle strategy.
```tsx | pure
@@ -20,7 +21,7 @@ As in the example code above, if `run` is triggered frequently, it will only be
You can quickly enter text in the input box below to experience the effect
-
+
+
+
{JSON.stringify(state, null, 2)}
-
-
-
-
-
-
+
);
};
diff --git a/packages/hooks/src/useResetState/index.en-US.md b/packages/hooks/src/useResetState/index.en-US.md
index e1dfa036d9..5dbd7a55f0 100644
--- a/packages/hooks/src/useResetState/index.en-US.md
+++ b/packages/hooks/src/useResetState/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useResetState
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 16
+toc: content
+demo:
+ cols: 2
---
-# useResetState
-
useResetState works similar to `React.useState`, it provides a `reset` method
## Examples
-### Default Usage
-
-Please change the width of the browser window to see the effect:
diff --git a/packages/hooks/src/useResponsive/index.en-US.md b/packages/hooks/src/useResponsive/index.en-US.md
index b97b320071..63513f5ad6 100644
--- a/packages/hooks/src/useResponsive/index.en-US.md
+++ b/packages/hooks/src/useResponsive/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useResponsive
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 16
+toc: content
+demo:
+ cols: 2
---
-# useResponsive
-
React Hook for getting responsive info.
## Examples
-### Get responsive info in components
-
-();
+ const text = value || 'Loading...';
useEffect(() => {
setTimeout(() => {
@@ -10,8 +20,6 @@ const Child = () => {
}, 5000);
}, []);
- const text = value || 'Loading...';
-
return {text};
};
@@ -19,9 +27,11 @@ export default () => {
const [visible, setVisible] = useState(true);
return (
-
-
+ <>
+
{visible && {JSON.stringify(scroll)}
@@ -19,7 +20,9 @@ export default () => {
style={{
height: '160px',
width: '160px',
- border: 'solid 1px #000',
+ border: '1px dashed #ccc',
+ borderRadius: 4,
+ marginTop: 8,
overflow: 'scroll',
whiteSpace: 'nowrap',
fontSize: '32px',
diff --git a/packages/hooks/src/useScroll/demo/demo2.tsx b/packages/hooks/src/useScroll/demo/demo2.tsx
index 605913b142..bf4e5874eb 100644
--- a/packages/hooks/src/useScroll/demo/demo2.tsx
+++ b/packages/hooks/src/useScroll/demo/demo2.tsx
@@ -1,9 +1,9 @@
/**
* title: Listen Page Scroll
- * desc: Try to scroll this webpage.
+ * description: Try to scroll this webpage.
*
* title.zh-CN: 监测整页的滚动
- * desc.zh-CN: 尝试滚动一下页面。
+ * description.zh-CN: 尝试滚动一下页面。
*/
import React from 'react';
@@ -11,9 +11,6 @@ import { useScroll } from 'ahooks';
export default () => {
const scroll = useScroll(document);
- return (
-
- {JSON.stringify(scroll)}
-
- );
+
+ return <>{JSON.stringify(scroll)};
};
diff --git a/packages/hooks/src/useScroll/demo/demo3.tsx b/packages/hooks/src/useScroll/demo/demo3.tsx
index e0e5174d0b..68a0a89b5a 100644
--- a/packages/hooks/src/useScroll/demo/demo3.tsx
+++ b/packages/hooks/src/useScroll/demo/demo3.tsx
@@ -1,9 +1,9 @@
/**
- * title: Custom update
- * desc: listen on scroll event between 100px ~ 200px in vertical direction
+ * title: Custom Update
+ * description: listen on scroll event between 100px ~ 200px in vertical direction.
*
* title.zh-CN: 自定义更新
- * desc.zh-CN: 在垂直方向 100px 到 200px 的滚动范围内监听
+ * description.zh-CN: 在垂直方向 100px 到 200px 的滚动范围内监听。
*/
import React, { useRef } from 'react';
@@ -11,7 +11,6 @@ import { useScroll } from 'ahooks';
export default () => {
const ref = useRef(null);
-
const scroll = useScroll(ref, (val) => val.top > 100 && val.top < 200);
return (
@@ -21,7 +20,9 @@ export default () => {
style={{
height: '160px',
width: '160px',
- border: 'solid 1px #000',
+ border: '1px dashed #ccc',
+ borderRadius: 4,
+ marginTop: 8,
overflow: 'scroll',
whiteSpace: 'nowrap',
fontSize: '36px',
diff --git a/packages/hooks/src/useScroll/index.en-US.md b/packages/hooks/src/useScroll/index.en-US.md
index ed85bfbd58..fa5b34e501 100644
--- a/packages/hooks/src/useScroll/index.en-US.md
+++ b/packages/hooks/src/useScroll/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useScroll
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 17
+toc: content
+demo:
+ cols: 2
---
-# useScroll
-
Get the scroll position of an element.
## Examples
-### Basic Usage
-
-{JSON.stringify(Array.from(set), null, 2)}
-
-
+ <>
+
+
+
+
+
+ {JSON.stringify(Array.from(set), null, 2)}
+
);
};
diff --git a/packages/hooks/src/useSet/index.en-US.md b/packages/hooks/src/useSet/index.en-US.md
index dd9d97d905..c0fcbdece7 100644
--- a/packages/hooks/src/useSet/index.en-US.md
+++ b/packages/hooks/src/useSet/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useSet
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 11
+toc: content
+demo:
+ cols: 2
---
-# useSet
-
A hook that can manage the state of Set.
## Examples
-### Default usage
-
-
+
+
+
{JSON.stringify(state, null, 2)}
-
-
-
-
-
+
);
};
diff --git a/packages/hooks/src/useSetState/demo/demo2.tsx b/packages/hooks/src/useSetState/demo/demo2.tsx
index 0318ac9113..fc9f941a38 100644
--- a/packages/hooks/src/useSetState/demo/demo2.tsx
+++ b/packages/hooks/src/useSetState/demo/demo2.tsx
@@ -7,6 +7,7 @@
*/
import React from 'react';
+import { Button } from 'antd';
import { useSetState } from 'ahooks';
interface State {
@@ -21,13 +22,14 @@ export default () => {
});
return (
-
+ <>
+
{JSON.stringify(state, null, 2)}
-
-
-
-
+
);
};
diff --git a/packages/hooks/src/useSetState/index.en-US.md b/packages/hooks/src/useSetState/index.en-US.md
index 6bfbf2d2f7..c3a539ce94 100644
--- a/packages/hooks/src/useSetState/index.en-US.md
+++ b/packages/hooks/src/useSetState/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useSetState
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 1
+toc: content
+demo:
+ cols: 2
---
-# useSetState
-
useSetState works similar to `this.setState` of class component, used to manage the state of object type.
## Examples
-### Default usage
-
-Try to resize the preview window
diff --git a/packages/hooks/src/useSize/demo/demo2.tsx b/packages/hooks/src/useSize/demo/demo2.tsx
index 98d8b37277..8936c2114e 100644
--- a/packages/hooks/src/useSize/demo/demo2.tsx
+++ b/packages/hooks/src/useSize/demo/demo2.tsx
@@ -1,9 +1,9 @@
/**
- * title: pass in the DOM element
- * desc: useSize can receive a dom element as parameter. In SSR scenarios, you can pass in function `() => dom`
+ * title: Pass in the DOM element
+ * description: useSize can receive a dom element as parameter. In SSR scenarios, you can pass in function `() => dom`.
*
* title.zh-CN: 传入 DOM 元素
- * desc.zh-CN: useSize 可以接收 dom，在 SSR 场景可以传入函数 `() => dom`
+ * description.zh-CN: useSize 可以接收 dom，在 SSR 场景可以传入函数 `() => dom`。
*/
import React from 'react';
@@ -11,6 +11,7 @@ import { useSize } from 'ahooks';
export default () => {
const size = useSize(document.querySelector('body'));
+
return (
Try to resize the preview window
diff --git a/packages/hooks/src/useSize/index.en-US.md b/packages/hooks/src/useSize/index.en-US.md
index 8d38060d2f..1f557e76b0 100644
--- a/packages/hooks/src/useSize/index.en-US.md
+++ b/packages/hooks/src/useSize/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useSize
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 18
+toc: content
+demo:
+ cols: 2
---
-# useSize
-
A hook that observes size change of an element.
## Examples
-### Default usage
-
-(
- () => {
- const el = getTargetElement(target);
- return el ? { width: el.clientWidth, height: el.clientHeight } : undefined
- },
- );
+ const [state, setState] = useRafState(() => {
+ const el = getTargetElement(target);
+ return el ? { width: el.clientWidth, height: el.clientHeight } : undefined;
+ });
useIsomorphicLayoutEffectWithTarget(
() => {
diff --git a/packages/hooks/src/useSize/index.zh-CN.md b/packages/hooks/src/useSize/index.zh-CN.md
index efd4c815f7..d7d26f0139 100644
--- a/packages/hooks/src/useSize/index.zh-CN.md
+++ b/packages/hooks/src/useSize/index.zh-CN.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useSize
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 18
+toc: content
+demo:
+ cols: 2
---
-# useSize
-
监听 DOM 节点尺寸变化的 Hook。
## 代码演示
-### 基础用法
-
-You can select text all page.
diff --git a/packages/hooks/src/useTextSelection/demo/demo2.tsx b/packages/hooks/src/useTextSelection/demo/demo2.tsx
index 4d1a3bf75a..065caf311e 100644
--- a/packages/hooks/src/useTextSelection/demo/demo2.tsx
+++ b/packages/hooks/src/useTextSelection/demo/demo2.tsx
@@ -1,26 +1,32 @@
/**
* title: Translate user text selection
- * desc: Use Antd.Popover to translate user text selection
+ * description: Use Antd.Popover to translate user text selection.
*
* title.zh-CN: 划词翻译
- * desc.zh-CN: 配合 Popover 做划词翻译
+ * description.zh-CN: 配合 Popover 做划词翻译。
*/
-import { useRequest, useTextSelection } from 'ahooks';
-import { Popover, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
+import { Popover, Spin } from 'antd';
+import { useRequest, useTextSelection } from 'ahooks';
const getResult = (keyword: string): Promise => {
const trimedText = keyword.trim() !== '';
+
if (!trimedText) {
return Promise.resolve('');
}
+
return new Promise((resolve) => {
setTimeout(() => resolve(`[translate result] ${keyword}`), 2000);
});
};
export default () => {
+ const [open, setOpen] = useState(false);
+ const { data, run, loading } = useRequest(getResult, {
+ manual: true,
+ });
const {
text = '',
left = 0,
@@ -29,12 +35,6 @@ export default () => {
width = 0,
} = useTextSelection(() => document.querySelector('#translate-dom'));
- const [open, setOpen] = useState(false);
-
- const { data, run, loading } = useRequest(getResult, {
- manual: true,
- });
-
useEffect(() => {
if (text.trim() === '') {
setOpen(false);
@@ -46,7 +46,7 @@ export default () => {
return (
-
+
Translation of this paragraph;Translation of this paragraph;Translation of this paragraph;
{
const ref = useRef(null);
const selection = useTextSelection(ref);
+
return (
-
+
Please swipe your mouse to select any text on this paragraph.
Result：{JSON.stringify(selection)}
diff --git a/packages/hooks/src/useTextSelection/index.en-US.md b/packages/hooks/src/useTextSelection/index.en-US.md
index 4b4714e0df..d119bc9e76 100644
--- a/packages/hooks/src/useTextSelection/index.en-US.md
+++ b/packages/hooks/src/useTextSelection/index.en-US.md
@@ -1,25 +1,22 @@
---
-nav:
- path: /hooks
+title: useTextSelection
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 12
+toc: content
+demo:
+ cols: 2
---
-# useTextSelection
-
Tracking content, size, position of user text selection.
## Examples
-### Default usage
-
-throttledValue: {throttledValue}
-
+
+ throttled value: {throttledValue}
+ setValue(e.target.value)} placeholder="Typed value" />
+
);
};
diff --git a/packages/hooks/src/useThrottle/index.en-US.md b/packages/hooks/src/useThrottle/index.en-US.md
index 35e665352d..251d7eff2f 100644
--- a/packages/hooks/src/useThrottle/index.en-US.md
+++ b/packages/hooks/src/useThrottle/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useThrottle
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 9
+toc: content
+demo:
+ cols: 2
---
-# useThrottle
-
A hook that deal with the throttled value.
## Examples
-### Default usage
-
-([]);
+
useThrottleEffect(
() => {
setRecords((val) => [...val, value]);
@@ -13,21 +23,20 @@ export default () => {
wait: 1000,
},
);
+
return (
- setValue(e.target.value)}
placeholder="Typed value"
- style={{ width: 280 }}
/>
-
-
- {records.map((record, index) => (
- - {record}
- ))}
-
-
+
+ {records.map((record, index) => (
+ - {record}
+ ))}
+
);
};
diff --git a/packages/hooks/src/useThrottleEffect/index.en-US.md b/packages/hooks/src/useThrottleEffect/index.en-US.md
index be639fa910..27c1790231 100644
--- a/packages/hooks/src/useThrottleEffect/index.en-US.md
+++ b/packages/hooks/src/useThrottleEffect/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useThrottleEffect
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 7
+toc: content
+demo:
+ cols: 2
---
-# useThrottleEffect
-
Throttle your `useEffect`.
## Examples
-### Default usage
-
- Clicked count: {value}
-
);
};
diff --git a/packages/hooks/src/useThrottleFn/index.en-US.md b/packages/hooks/src/useThrottleFn/index.en-US.md
index 03cbf27f71..8dc0fa6db6 100644
--- a/packages/hooks/src/useThrottleFn/index.en-US.md
+++ b/packages/hooks/src/useThrottleFn/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useThrottleFn
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 6
+toc: content
+demo:
+ cols: 2
---
-# useThrottleFn
-
A hook that deal with the throttled function.
## Examples
-### Default usage
-
- count: {count}
- Delay: {delay}
-
-
-
+ count: {count}
+ delay: {delay}
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useTimeout/index.en-US.md b/packages/hooks/src/useTimeout/index.en-US.md
index 2fbe0fb123..077e11ef34 100644
--- a/packages/hooks/src/useTimeout/index.en-US.md
+++ b/packages/hooks/src/useTimeout/index.en-US.md
@@ -1,18 +1,21 @@
---
-nav:
- path: /hooks
+title: useTimeout
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 12
+toc: content
+demo:
+ cols: 2
---
-# useTimeout
-
A hook that handles the `setTimeout` timer function.
## Examples
-### Default usage
-
-Set title of the page.
-
- );
+ return Set title of the page.
;
};
diff --git a/packages/hooks/src/useTitle/index.en-US.md b/packages/hooks/src/useTitle/index.en-US.md
index 781249cab1..f5b2d6d0d7 100644
--- a/packages/hooks/src/useTitle/index.en-US.md
+++ b/packages/hooks/src/useTitle/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useTitle
+nav: Hooks
+group:
+ title: Dom
+ order: 6
+order: 7
+toc: content
+demo:
+ cols: 2
---
-# useTitle
-
A hook that set title of the page.
## Examples
-### Default usage
-
-Effects：{`${state}`}
-
-
-
-
-
+ effects: {`${state}`}
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useToggle/demo/demo2.tsx b/packages/hooks/src/useToggle/demo/demo2.tsx
index 29a1b15c25..ce71b2484a 100644
--- a/packages/hooks/src/useToggle/demo/demo2.tsx
+++ b/packages/hooks/src/useToggle/demo/demo2.tsx
@@ -1,12 +1,13 @@
/**
* title: Toggle between any two values
- * desc: Accept two optional parameters and toggle between them.
+ * description: Accept two optional parameters and toggle between them.
*
* title.zh-CN: 在任意两个值之间切换
- * desc.zh-CN: 接受两个可选参数，在它们之间进行切换。
+ * description.zh-CN: 接受两个可选参数，在它们之间进行切换。
*/
import React from 'react';
+import { Button, Space } from 'antd';
import { useToggle } from 'ahooks';
export default () => {
@@ -14,24 +15,14 @@ export default () => {
return (
- Effects：{state}
-
-
-
-
-
-
-
+ effects: {state}
+
+
+
+
+
+
+
);
};
diff --git a/packages/hooks/src/useToggle/index.en-US.md b/packages/hooks/src/useToggle/index.en-US.md
index a77dadd619..0b8581c913 100644
--- a/packages/hooks/src/useToggle/index.en-US.md
+++ b/packages/hooks/src/useToggle/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useToggle
+nav: Hooks
+group:
+ title: State
+ order: 4
+order: 3
+toc: content
+demo:
+ cols: 2
---
-# useToggle
-
A hook that toggle states.
## Examples
-### Default usage
-
-Please open the browser console to view the output!
-
+ Please open the browser console to view the output!
+
+
Count: {count}
-
-
+
+
Count2: {count2}
-
);
diff --git a/packages/hooks/src/useTrackedEffect/index.en-US.md b/packages/hooks/src/useTrackedEffect/index.en-US.md
index 9e9195953a..006fdc5dbf 100644
--- a/packages/hooks/src/useTrackedEffect/index.en-US.md
+++ b/packages/hooks/src/useTrackedEffect/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useTrackedEffect
+nav: Hooks
+group:
+ title: Dev
+ order: 8
+order: 1
+toc: content
+demo:
+ cols: 2
---
-# useTrackedEffect
-
A hook of useEffect that allow us to track which dependencies caused the effect to trigger.
## Examples
-### Basic usage
-
-(effect: Effect, deps?: [...T]) => {
diff --git a/packages/hooks/src/useTrackedEffect/index.zh-CN.md b/packages/hooks/src/useTrackedEffect/index.zh-CN.md
index 997a2749e3..03c19c6d62 100644
--- a/packages/hooks/src/useTrackedEffect/index.zh-CN.md
+++ b/packages/hooks/src/useTrackedEffect/index.zh-CN.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useTrackedEffect
+nav: Hooks
+group:
+ title: Dev
+ order: 8
+order: 1
+toc: content
+demo:
+ cols: 2
---
-# useTrackedEffect
-
追踪是哪个依赖变化触发了 `useEffect` 的执行。
## 代码演示
-### 基础用法
-
-effectCount: {effectCount}
updateEffectCount: {updateEffectCount}
-
-
-
+
);
};
diff --git a/packages/hooks/src/useUpdateEffect/index.en-US.md b/packages/hooks/src/useUpdateEffect/index.en-US.md
index 0009d41d77..2104245060 100644
--- a/packages/hooks/src/useUpdateEffect/index.en-US.md
+++ b/packages/hooks/src/useUpdateEffect/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useUpdateEffect
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 1
+toc: content
+demo:
+ cols: 2
---
-# useUpdateEffect
-
A hook alike `useEffect` but skips running the effect for the first time.
## Examples
-### Basic usage
-
-layoutEffectCount: {layoutEffectCount}
updateLayoutEffectCount: {updateLayoutEffectCount}
-
-
-
+
);
};
diff --git a/packages/hooks/src/useUpdateLayoutEffect/index.en-US.md b/packages/hooks/src/useUpdateLayoutEffect/index.en-US.md
index 2ff426cb40..95a26ae7fb 100644
--- a/packages/hooks/src/useUpdateLayoutEffect/index.en-US.md
+++ b/packages/hooks/src/useUpdateLayoutEffect/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useUpdateLayoutEffect
+nav: Hooks
+group:
+ title: Effect
+ order: 5
+order: 2
+toc: content
+demo:
+ cols: 2
---
-# useUpdateLayoutEffect
-
A hook alike `useLayoutEffect` but skips running the effect for the first time.
## Examples
-### Basic usage
-
- onChange(Number(e.target.value))}
+ onChange={(val) => onChange(Number(val))}
/>
-
-
+
+
{list.map((ele) => (
@@ -53,7 +45,8 @@ export default () => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
- border: '1px solid #e8e8e8',
+ border: '1px dashed #ccc',
+ borderRadius: 4,
marginBottom: 8,
}}
key={ele.index}
diff --git a/packages/hooks/src/useVirtualList/index.en-US.md b/packages/hooks/src/useVirtualList/index.en-US.md
index 7129c8c367..d85bccb9e6 100644
--- a/packages/hooks/src/useVirtualList/index.en-US.md
+++ b/packages/hooks/src/useVirtualList/index.en-US.md
@@ -1,21 +1,21 @@
---
-nav:
- path: /hooks
+title: useVirtualList
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 6
+toc: content
+demo:
+ cols: 2
---
-# useVirtualList
-
A hook that allows you to use virtual list to render huge chunks of list data.
## Examples
-### Default usage
-
-received message:
{messageHistory.current.map((message, index) => (
@@ -51,6 +40,26 @@ export default () => {
))}
-
+
+ {/* send message */}
+
+ {/* disconnect */}
+
+ {/* connect */}
+
+
+
);
};
diff --git a/packages/hooks/src/useWebSocket/index.en-US.md b/packages/hooks/src/useWebSocket/index.en-US.md
index 763a18681e..a3acfb51f1 100644
--- a/packages/hooks/src/useWebSocket/index.en-US.md
+++ b/packages/hooks/src/useWebSocket/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useWebSocket
+nav: Hooks
+group:
+ title: Scene
+ order: 2
+order: 13
+toc: content
+demo:
+ cols: 2
---
-# useWebSocket
-
A hook for WebSocket.
## Examples
-### Default usage
-
-
randomNum: {randomNum}
-
-
+
+
);
};
@@ -35,13 +34,13 @@ export default () => {
return (
Please open the browser console to view the output!
+
+
+ Please open the browser console to view the output!
);
};
diff --git a/packages/hooks/src/useWhyDidYouUpdate/index.en-US.md b/packages/hooks/src/useWhyDidYouUpdate/index.en-US.md
index e02e375780..c70250d228 100644
--- a/packages/hooks/src/useWhyDidYouUpdate/index.en-US.md
+++ b/packages/hooks/src/useWhyDidYouUpdate/index.en-US.md
@@ -1,17 +1,20 @@
---
-nav:
- path: /hooks
+title: useWhyDidYouUpdate
+nav: Hooks
+group:
+ title: Dev
+ order: 8
+order: 2
+toc: content
+demo:
+ cols: 2
---
-# useWhyDidYouUpdate
-
Help developers troubleshoot what changes have caused component rerender.
## Examples
-### Default usage
-
-