feat: add useLocalStorage doc

qiaoyuwen · qiaoyuwen · commit fe04cc0f1222 · 2021-07-06T10:11:04.000+08:00
diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts
@@ -6,3 +6,4 @@ export * from './selection';
 export * from './set';
 export * from './timeout';
 export * from './pagination';
+export * from './local-storage';
diff --git a/packages/react-hooks/src/local-storage/demo/useLocalStorage.tsx b/packages/react-hooks/src/local-storage/demo/useLocalStorage.tsx
@@ -0,0 +1,30 @@
+/**
+ * title: 将 state 持久化在 localStorage 中
+ * desc: 刷新页面后，可以看到输入框中的内容被从 localStorage 中恢复了。
+ */
+
+import type { FunctionComponent } from 'react';
+import { Space, Input, Button } from 'antd';
+import 'antd/dist/antd.css';
+import { useLocalStorage } from '..';
+
+const Component: FunctionComponent = () => {
+  const [value, setValue] = useLocalStorage('localStorageDemo', '');
+
+  return (
+    <>
+      <Space direction="vertical">
+        <Space>
+          <Input value={value} onChange={(e) => setValue(e.target.value)} />
+        </Space>
+        <Space>
+          <Button type="primary" onClick={() => setValue('')}>
+            重置
+          </Button>
+        </Space>
+      </Space>
+    </>
+  );
+};
+
+export default Component;
diff --git a/packages/react-hooks/src/local-storage/useLocalStorage.md b/packages/react-hooks/src/local-storage/useLocalStorage.md
@@ -0,0 +1,32 @@
+---
+title: useLocalStorage
+nav:
+  title: Hooks
+  path: /hook
+order: 2
+---
+
+# useLocalStorage
+
+管理 localStorage 的 hook
+
+<code src="./demo/useLocalStorage.tsx">
+
+# API
+
+```typescript
+const [
+  state,
+  setState,
+] = useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+);
+```
+
+# 返回值
+
+| 参数     | 说明                              | 类型               |
+| -------- | --------------------------------- | ------------------ |
+| state    | 状态值                            | boolean            |
+| setState | 设置新状态值并同步到 localStorage | (value: T) => void |
