@reactuses/core 5.0.20 → 5.0.22

package/README.md

@@ -86,11 +86,4 @@ This project is heavily inspired by the following awesome projects.
 
 If my work has helped you, consider buying me a cup of coffee. Thank you very much🥰!.
 
-[Buy me a coffee](https://www.buymeacoffee.com/lianwenwu)
-
-### For Chinese User
-
-<p float="left">
-  <img src="https://d21002cb.images-f3o.pages.dev/images/wechat.jpg" alt="Wechat Pay" width="200" />
-  <img src="https://d21002cb.images-f3o.pages.dev/images/ali.jpg" alt="Ali Pay" width="200" />
-</p>
+[Buy me a coffee](https://www.buymeacoffee.com/lianwenwu)

package/dist/index.cjs

@@ -618,7 +618,8 @@ function getInitialState$3(key, defaultValue, storage, serializer, onError) {
 }
 function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStorage : undefined, options = defaultOptions$1) {
     let storage;
-    const { onError = defaultOnError, effectStorageValue } = options;
+    const { onError = defaultOnError, effectStorageValue, mountStorageValue, listenToStorageChanges = true } = options;
+    const storageValue = mountStorageValue != null ? mountStorageValue : effectStorageValue;
     try {
         storage = getStorage();
     } catch (err) {
@@ -630,7 +631,7 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
     const [state, setState] = React.useState(getInitialState$3(key, defaultValue, storage, serializer, onError));
     useDeepCompareEffect(()=>{
         var _ref;
-        const data = (_ref = effectStorageValue ? isFunction(effectStorageValue) ? effectStorageValue() : effectStorageValue : defaultValue) != null ? _ref : null;
+        const data = (_ref = storageValue ? isFunction(storageValue) ? storageValue() : storageValue : defaultValue) != null ? _ref : null;
         const getStoredValue = ()=>{
             try {
                 const raw = storage == null ? void 0 : storage.getItem(key);
@@ -650,7 +651,7 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
         serializer,
         storage,
         onError,
-        effectStorageValue
+        storageValue
     ]);
     const updateState = useEvent((valOrFunc)=>{
         const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -665,6 +666,28 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
             }
         }
     });
+    const listener = useEvent(()=>{
+        try {
+            const raw = storage == null ? void 0 : storage.getItem(key);
+            if (raw !== undefined && raw !== null) {
+                updateState(serializer.read(raw));
+            } else {
+                updateState(null);
+            }
+        } catch (e) {
+            onError(e);
+        }
+    });
+    React.useEffect(()=>{
+        if (listenToStorageChanges) {
+            window.addEventListener('storage', listener);
+            return ()=>window.removeEventListener('storage', listener);
+        }
+        return ()=>{};
+    }, [
+        listenToStorageChanges,
+        listener
+    ]);
     return [
         state,
         updateState
@@ -677,7 +700,7 @@ const useDarkMode = (options)=>{
         return window.matchMedia('(prefers-color-scheme: dark)').matches;
     };
     const [dark, setDark] = useStorage(storageKey, defaultValue, storage, {
-        effectStorageValue: value
+        mountStorageValue: value
     });
     React.useEffect(()=>{
         var _window;

package/dist/index.d.cts

@@ -1448,19 +1448,33 @@ interface Serializer<T> {
 }
 interface UseStorageOptions<T> {
     /**
-     * Custom data serialization
+     * @en Custom data serialization
+     * @zh 自定义数据序列化
      */
     serializer?: Serializer<T>;
     /**
-     * On error callback
-     *
-     * Default log error to `console.error`
+     * @en On error callback
+     * @zh 错误回调
+     * @defaultValue `console.error`
      */
     onError?: (error: unknown) => void;
     /**
-     * set to storage when nodata in effect, fallback to defaults
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 
 declare function useLocalStorage(key: string, defaults: string, options?: UseStorageOptions<string>): readonly [string | null, Dispatch<SetStateAction<string | null>>];
@@ -3117,10 +3131,22 @@ interface UseLocalStorageOptions<T> {
      */
     onError?: (error: unknown) => void;
     /**
-     * @en set to storage when storage doesn't has data in effect, fallback to `defaultValue`
-     * @zh 当副作用执行的时候没有在 storage 中获取到数据时设置，默认会设置 `defaultValue`
+     * @en set to storage when nodata in first mount, deprecated
+     * @zh 首次挂载时没有数据时设置到 storage, 已弃用
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 /**
  * @title UseLocalStorageSerializer
@@ -3262,10 +3288,22 @@ interface UseSessionStorageOptions<T> {
      */
     onError?: (error: unknown) => void;
     /**
-     * @en set to storage when storage doesn't has data in effect, fallback to `defaultValue`
-     * @zh 当副作用执行的时候没有在 storage 中获取到数据时设置，默认会设置 `defaultValue`
+     * @en set to storage when nodata in first mount, deprecated
+     * @zh 首次挂载时没有数据时设置到 storage, 已弃用
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 /**
  * @title UseSessionStorageSerializer

package/dist/index.d.mts

@@ -1448,19 +1448,33 @@ interface Serializer<T> {
 }
 interface UseStorageOptions<T> {
     /**
-     * Custom data serialization
+     * @en Custom data serialization
+     * @zh 自定义数据序列化
      */
     serializer?: Serializer<T>;
     /**
-     * On error callback
-     *
-     * Default log error to `console.error`
+     * @en On error callback
+     * @zh 错误回调
+     * @defaultValue `console.error`
      */
     onError?: (error: unknown) => void;
     /**
-     * set to storage when nodata in effect, fallback to defaults
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 
 declare function useLocalStorage(key: string, defaults: string, options?: UseStorageOptions<string>): readonly [string | null, Dispatch<SetStateAction<string | null>>];
@@ -3117,10 +3131,22 @@ interface UseLocalStorageOptions<T> {
      */
     onError?: (error: unknown) => void;
     /**
-     * @en set to storage when storage doesn't has data in effect, fallback to `defaultValue`
-     * @zh 当副作用执行的时候没有在 storage 中获取到数据时设置，默认会设置 `defaultValue`
+     * @en set to storage when nodata in first mount, deprecated
+     * @zh 首次挂载时没有数据时设置到 storage, 已弃用
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 /**
  * @title UseLocalStorageSerializer
@@ -3262,10 +3288,22 @@ interface UseSessionStorageOptions<T> {
      */
     onError?: (error: unknown) => void;
     /**
-     * @en set to storage when storage doesn't has data in effect, fallback to `defaultValue`
-     * @zh 当副作用执行的时候没有在 storage 中获取到数据时设置，默认会设置 `defaultValue`
+     * @en set to storage when nodata in first mount, deprecated
+     * @zh 首次挂载时没有数据时设置到 storage, 已弃用
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 /**
  * @title UseSessionStorageSerializer

package/dist/index.d.ts

@@ -1448,19 +1448,33 @@ interface Serializer<T> {
 }
 interface UseStorageOptions<T> {
     /**
-     * Custom data serialization
+     * @en Custom data serialization
+     * @zh 自定义数据序列化
      */
     serializer?: Serializer<T>;
     /**
-     * On error callback
-     *
-     * Default log error to `console.error`
+     * @en On error callback
+     * @zh 错误回调
+     * @defaultValue `console.error`
      */
     onError?: (error: unknown) => void;
     /**
-     * set to storage when nodata in effect, fallback to defaults
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 
 declare function useLocalStorage(key: string, defaults: string, options?: UseStorageOptions<string>): readonly [string | null, Dispatch<SetStateAction<string | null>>];
@@ -3117,10 +3131,22 @@ interface UseLocalStorageOptions<T> {
      */
     onError?: (error: unknown) => void;
     /**
-     * @en set to storage when storage doesn't has data in effect, fallback to `defaultValue`
-     * @zh 当副作用执行的时候没有在 storage 中获取到数据时设置，默认会设置 `defaultValue`
+     * @en set to storage when nodata in first mount, deprecated
+     * @zh 首次挂载时没有数据时设置到 storage, 已弃用
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 /**
  * @title UseLocalStorageSerializer
@@ -3262,10 +3288,22 @@ interface UseSessionStorageOptions<T> {
      */
     onError?: (error: unknown) => void;
     /**
-     * @en set to storage when storage doesn't has data in effect, fallback to `defaultValue`
-     * @zh 当副作用执行的时候没有在 storage 中获取到数据时设置，默认会设置 `defaultValue`
+     * @en set to storage when nodata in first mount, deprecated
+     * @zh 首次挂载时没有数据时设置到 storage, 已弃用
+     * @deprecated
      */
     effectStorageValue?: T | (() => T);
+    /**
+     * @en set to storage when nodata in first mount
+     * @zh 首次挂载时没有数据时设置到 storage
+     */
+    mountStorageValue?: T | (() => T);
+    /**
+     * @en listen to storage changes
+     * @zh 监听 storage 变化
+     * @defaultValue `true`
+     */
+    listenToStorageChanges?: boolean;
 }
 /**
  * @title UseSessionStorageSerializer

package/dist/index.mjs

@@ -610,7 +610,8 @@ function getInitialState$3(key, defaultValue, storage, serializer, onError) {
 }
 function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStorage : undefined, options = defaultOptions$1) {
     let storage;
-    const { onError = defaultOnError, effectStorageValue } = options;
+    const { onError = defaultOnError, effectStorageValue, mountStorageValue, listenToStorageChanges = true } = options;
+    const storageValue = mountStorageValue != null ? mountStorageValue : effectStorageValue;
     try {
         storage = getStorage();
     } catch (err) {
@@ -622,7 +623,7 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
     const [state, setState] = useState(getInitialState$3(key, defaultValue, storage, serializer, onError));
     useDeepCompareEffect(()=>{
         var _ref;
-        const data = (_ref = effectStorageValue ? isFunction(effectStorageValue) ? effectStorageValue() : effectStorageValue : defaultValue) != null ? _ref : null;
+        const data = (_ref = storageValue ? isFunction(storageValue) ? storageValue() : storageValue : defaultValue) != null ? _ref : null;
         const getStoredValue = ()=>{
             try {
                 const raw = storage == null ? void 0 : storage.getItem(key);
@@ -642,7 +643,7 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
         serializer,
         storage,
         onError,
-        effectStorageValue
+        storageValue
     ]);
     const updateState = useEvent((valOrFunc)=>{
         const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -657,6 +658,28 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
             }
         }
     });
+    const listener = useEvent(()=>{
+        try {
+            const raw = storage == null ? void 0 : storage.getItem(key);
+            if (raw !== undefined && raw !== null) {
+                updateState(serializer.read(raw));
+            } else {
+                updateState(null);
+            }
+        } catch (e) {
+            onError(e);
+        }
+    });
+    useEffect(()=>{
+        if (listenToStorageChanges) {
+            window.addEventListener('storage', listener);
+            return ()=>window.removeEventListener('storage', listener);
+        }
+        return ()=>{};
+    }, [
+        listenToStorageChanges,
+        listener
+    ]);
     return [
         state,
         updateState
@@ -669,7 +692,7 @@ const useDarkMode = (options)=>{
         return window.matchMedia('(prefers-color-scheme: dark)').matches;
     };
     const [dark, setDark] = useStorage(storageKey, defaultValue, storage, {
-        effectStorageValue: value
+        mountStorageValue: value
     });
     useEffect(()=>{
         var _window;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "5.0.20",
+  "version": "5.0.22",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {