@reactuses/core 2.2.0 → 2.2.1

package/dist/index.cjs

@@ -116,38 +116,41 @@ const StorageSerializers = {
   }
 };
 function useStorage(key, defaults, getStorage, options = {}) {
-  var _a;
+  const defaultOnError = React.useCallback((e) => {
+    console.error(e);
+  }, []);
   let storage;
-  const {
-    onError = (e) => {
-      console.error(e);
-    }
-  } = options;
-  const data = defaults;
+  const { onError = defaultOnError, ignoreDefaults = true } = options;
   try {
     storage = getStorage();
   } catch (err) {
-    console.error(err);
+    onError(err);
   }
   const type = guessSerializerType(defaults);
-  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const getStoredValue = useEvent(() => {
-    try {
-      const raw = storage == null ? void 0 : storage.getItem(key);
-      if (raw !== void 0 && raw !== null) {
-        return serializer.read(raw);
-      } else {
-        storage == null ? void 0 : storage.setItem(key, serializer.write(data));
-        return data;
-      }
-    } catch (e) {
-      onError(e);
-    }
-  });
+  const serializer = React.useMemo(
+    () => {
+      var _a;
+      return (_a = options.serializer) != null ? _a : StorageSerializers[type];
+    },
+    [options.serializer, type]
+  );
   const [state, setState] = React.useState(defaults);
   React.useEffect(() => {
+    const getStoredValue = () => {
+      try {
+        const raw = storage == null ? void 0 : storage.getItem(key);
+        if (raw !== void 0 && raw !== null && ignoreDefaults) {
+          return serializer.read(raw);
+        } else {
+          storage == null ? void 0 : storage.setItem(key, serializer.write(defaults));
+          return defaults;
+        }
+      } catch (e) {
+        onError(e);
+      }
+    };
     setState(getStoredValue());
-  }, [getStoredValue, key]);
+  }, [key, ignoreDefaults, defaults, serializer, storage, onError]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -261,7 +264,9 @@ function useDarkMode(options = {}) {
   } = options;
   const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
-  const [dark, setDark] = useStorage(storageKey, value, storage);
+  const [dark, setDark] = useStorage(storageKey, value, storage, {
+    ignoreDefaults: false
+  });
   const wrappedSetDark = React.useCallback(
     (latestDark) => {
       const element = window == null ? void 0 : window.document.querySelector(selector);

package/dist/index.d.ts

@@ -27,6 +27,10 @@ interface UseStorageOptions<T> {
      * Default log error to `console.error`
      */
     onError?: (error: unknown) => void;
+    /**
+     * ignore default value when storage has value
+     */
+    ignoreDefaults?: boolean;
 }
 
 declare function useLocalStorage(key: string, defaults: string, options?: UseStorageOptions<string>): readonly [string | null, Dispatch<SetStateAction<string | null>>];
@@ -74,8 +78,7 @@ interface UseDarkOptions<T> {
      */
     attribute?: string;
     /**
-     * The initial value write the target element, defaultValue follow system prefer color
-     * must be set in SSR
+     * The initial classname value write the target element, Otherwise, it will follow the system by default
      * @default 'light | dark'
      */
     initialValue?: T;
@@ -92,7 +95,7 @@ interface UseDarkOptions<T> {
      */
     storage?: () => Storage;
 }
-declare function useDarkMode<T extends string | "light" | "dark">(options?: UseDarkOptions<T>): readonly [T | null, (latestDark: T) => void];
+declare function useDarkMode<T extends string>(options?: UseDarkOptions<T>): readonly [T | null, (latestDark: T) => void];
 
 declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
 

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useLayoutEffect, useCallback, useState, useReducer, useMemo } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, useCallback, useMemo, useState, useReducer } from 'react';
 import { throttle, debounce, isEqual } from 'lodash';
 
 function usePrevious(state) {
@@ -108,38 +108,41 @@ const StorageSerializers = {
   }
 };
 function useStorage(key, defaults, getStorage, options = {}) {
-  var _a;
+  const defaultOnError = useCallback((e) => {
+    console.error(e);
+  }, []);
   let storage;
-  const {
-    onError = (e) => {
-      console.error(e);
-    }
-  } = options;
-  const data = defaults;
+  const { onError = defaultOnError, ignoreDefaults = true } = options;
   try {
     storage = getStorage();
   } catch (err) {
-    console.error(err);
+    onError(err);
   }
   const type = guessSerializerType(defaults);
-  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const getStoredValue = useEvent(() => {
-    try {
-      const raw = storage == null ? void 0 : storage.getItem(key);
-      if (raw !== void 0 && raw !== null) {
-        return serializer.read(raw);
-      } else {
-        storage == null ? void 0 : storage.setItem(key, serializer.write(data));
-        return data;
-      }
-    } catch (e) {
-      onError(e);
-    }
-  });
+  const serializer = useMemo(
+    () => {
+      var _a;
+      return (_a = options.serializer) != null ? _a : StorageSerializers[type];
+    },
+    [options.serializer, type]
+  );
   const [state, setState] = useState(defaults);
   useEffect(() => {
+    const getStoredValue = () => {
+      try {
+        const raw = storage == null ? void 0 : storage.getItem(key);
+        if (raw !== void 0 && raw !== null && ignoreDefaults) {
+          return serializer.read(raw);
+        } else {
+          storage == null ? void 0 : storage.setItem(key, serializer.write(defaults));
+          return defaults;
+        }
+      } catch (e) {
+        onError(e);
+      }
+    };
     setState(getStoredValue());
-  }, [getStoredValue, key]);
+  }, [key, ignoreDefaults, defaults, serializer, storage, onError]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -253,7 +256,9 @@ function useDarkMode(options = {}) {
   } = options;
   const prefersDarkMode = usePreferredDark(false);
   const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
-  const [dark, setDark] = useStorage(storageKey, value, storage);
+  const [dark, setDark] = useStorage(storageKey, value, storage, {
+    ignoreDefaults: false
+  });
   const wrappedSetDark = useCallback(
     (latestDark) => {
       const element = window == null ? void 0 : window.document.querySelector(selector);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",