diff --git a/packages/hooks/src/useEventListener/index.en-US.md b/packages/hooks/src/useEventListener/index.en-US.md index 2e89dd2404..20b3520a2f 100644 --- a/packages/hooks/src/useEventListener/index.en-US.md +++ b/packages/hooks/src/useEventListener/index.en-US.md @@ -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` | diff --git a/packages/hooks/src/useEventListener/index.zh-CN.md b/packages/hooks/src/useEventListener/index.zh-CN.md index 35af05bcce..b3606f1046 100644 --- a/packages/hooks/src/useEventListener/index.zh-CN.md +++ b/packages/hooks/src/useEventListener/index.zh-CN.md @@ -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` | diff --git a/packages/hooks/src/useLocalStorageState/demo/demo4.tsx b/packages/hooks/src/useLocalStorageState/demo/demo4.tsx index 86985b2493..ca1c914229 100644 --- a/packages/hooks/src/useLocalStorageState/demo/demo4.tsx +++ b/packages/hooks/src/useLocalStorageState/demo/demo4.tsx @@ -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'; @@ -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); diff --git a/packages/hooks/src/useLocalStorageState/index.en-US.md b/packages/hooks/src/useLocalStorageState/index.en-US.md index db7296600c..f0001eaacf 100644 --- a/packages/hooks/src/useLocalStorageState/index.en-US.md +++ b/packages/hooks/src/useLocalStorageState/index.en-US.md @@ -54,12 +54,13 @@ const [state, setState] = useLocalStorageState( ### 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 diff --git a/packages/hooks/src/useLocalStorageState/index.zh-CN.md b/packages/hooks/src/useLocalStorageState/index.zh-CN.md index 40300e9965..a9b84ba3f0 100644 --- a/packages/hooks/src/useLocalStorageState/index.zh-CN.md +++ b/packages/hooks/src/useLocalStorageState/index.zh-CN.md @@ -54,12 +54,13 @@ const [state, setState] = useLocalStorageState( ### 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) }` | ## 备注