Skip to content

Commit

Permalink
docs: modify docs and demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@liuyib
liuyib committed Aug 21, 2023
1 parent ca342d1 commit de1df4d
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 14 deletions.
1 change: 1 addition & 0 deletions packages/hooks/src/useEventListener/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,4 @@ useEventListener(
| capture | Optional, a Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. | `boolean` | `false` |
| once | Optional, A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked. | `boolean` | `false` |
| passive | Optional, A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. | `boolean` | `false` |
| enable | Optional, Whether to enable listening. | `boolean` | `true` |
1 change: 1 addition & 0 deletions packages/hooks/src/useEventListener/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,4 @@ useEventListener(
| capture | 可选项，listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。 | `boolean` | `false` |
| once | 可选项，listener 在添加之后最多只调用一次。如果是 true，listener 会在其被调用之后自动移除。 | `boolean` | `false` |
| passive | 可选项，设置为 true 时，表示 listener 永远不会调用 preventDefault() 。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。 | `boolean` | `false` |
| enable | 可选项，是否开启监听。 | `boolean` | `true` |
5 changes: 3 additions & 2 deletions packages/hooks/src/useLocalStorageState/demo/demo4.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/**
* title: Sync state with localStorage
* desc: The state can be synchronized with `localStorage`, ensuring that it remains consistent across different tabs or when modified elsewhere (try to open this demo in two tabs, and then click the button in one of the tabs)
* desc: When the stored value changes, all `useLocalStorageState` with the same `key` will synchronize their states, including different tabs of the same browser (try to open two tabs of this page, clicking a button on one page will automatically update the "count" on the other page).
*
* title.zh-CN: 将 state 与 localStorage 保持同步
* desc.zh-CN: 当 state 在其他地方被修改时，会自动同步到 `localStorage` 中，包括同一浏览器不同 tab 之间（尝试打开两个此页面，点击其中一个页面的按钮，另一个页面的 count 会自动更新）
* desc.zh-CN: 存储值变化时，所有 `key` 相同的 `useLocalStorageState` 会同步状态，包括同一浏览器不同 tab 之间（尝试打开两个此页面，点击其中一个页面的按钮，另一个页面的 count 会自动更新）
*/

import React from 'react';
Expand All @@ -21,6 +21,7 @@ export default function () {
function Counter() {
const [count, setCount] = useLocalStorageState('use-local-storage-state-demo4', {
defaultValue: 0,
listenStorageChange: true,
});

const add = () => setCount(count! + 1);
Expand Down
13 changes: 7 additions & 6 deletions packages/hooks/src/useLocalStorageState/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,13 @@ const [state, setState] = useLocalStorageState<T>(
### Options
| Property | Description | Type | Default |
| ------------ | ----------------------------- | -------------------------- | ----------------------------- |
| defaultValue | Default value | `any \| (() => any)` | - |
| serializer | Custom serialization method | `(value: any) => string` | `JSON.stringify` |
| deserializer | Custom deserialization method | `(value: string) => any` | `JSON.parse` |
| onError | On error callback | `(error: unknown) => void` | `(e) => { console.error(e) }` |
| Property | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- |
| defaultValue | Default value | `any \| (() => any)` | - |
| listenStorageChange | Whether to listen storage changes. If `true`, when the stored value changes, all `useLocalStorageState` with the same `key` will synchronize their states, including different tabs of the same browser | `boolean` | `false` |
| serializer | Custom serialization method | `(value: any) => string` | `JSON.stringify` |
| deserializer | Custom deserialization method | `(value: string) => any` | `JSON.parse` |
| onError | On error callback | `(error: unknown) => void` | `(e) => { console.error(e) }` |
## Remark
Expand Down
13 changes: 7 additions & 6 deletions packages/hooks/src/useLocalStorageState/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,13 @@ const [state, setState] = useLocalStorageState<T>(
### Options
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------------ | -------------------------- | ----------------------------- |
| defaultValue | 默认值 | `any \| (() => any)` | - |
| serializer | 自定义序列化方法 | `(value: any) => string` | `JSON.stringify` |
| deserializer | 自定义反序列化方法 | `(value: string) => any` | `JSON.parse` |
| onError | 错误回调函数 | `(error: unknown) => void` | `(e) => { console.error(e) }` |
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- |
| defaultValue | 默认值 | `any \| (() => any)` | - |
| listenStorageChange | 是否监听存储变化。如果是 `true`，当存储值变化时，所有 `key` 相同的 `useLocalStorageState` 会同步状态，包括同一浏览器不同 tab 之间 | `boolean` | `false` |
| serializer | 自定义序列化方法 | `(value: any) => string` | `JSON.stringify` |
| deserializer | 自定义反序列化方法 | `(value: string) => any` | `JSON.parse` |
| onError | 错误回调函数 | `(error: unknown) => void` | `(e) => { console.error(e) }` |
## 备注
Expand Down

0 comments on commit de1df4d

Please sign in to comment.