use-local-storage-state - npm Package Compare versions

Comparing version 10.0.0 to 11.0.0

es/src/createLocalStorageStateHook.js

@@ -1,26 +0,34 @@
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import useLocalStorageStateBase from './useLocalStorageStateBase';
 export default function createLocalStorageStateHook(key, defaultValue) {
     const setValueFunctions = [];
+    const removeItemFunctions = [];
     return function useLocalStorageStateHook() {
-        const [value, setValue, isPersistent] = useLocalStorageStateBase(key, defaultValue);
-        const setValueAll = useMemo(() => {
-            const fn = (newValue) => {
-                for (const setValueFunction of setValueFunctions) {
-                    setValueFunction(newValue);
-                }
-            };
-            fn.reset = () => {
-                for (const setValueFunction of setValueFunctions) {
-                    setValueFunction.reset();
-                }
-            };
-            return fn;
+        const [value, setValue, { isPersistent, removeItem }] = useLocalStorageStateBase(key, defaultValue);
+        const setValueAll = useCallback((newValue) => {
+            for (const setValueFunction of setValueFunctions) {
+                setValueFunction(newValue);
+            }
         }, []);
         useEffect(() => {
             setValueFunctions.push(setValue);
-            return () => void setValueFunctions.splice(setValueFunctions.indexOf(setValue), 1);
-        }, [setValue]);
-        return [value, setValueAll, isPersistent];
+            removeItemFunctions.push(removeItem);
+            return () => {
+                setValueFunctions.splice(setValueFunctions.indexOf(setValue), 1);
+                removeItemFunctions.splice(removeItemFunctions.indexOf(removeItem), 1);
+            };
+        }, [setValue, removeItem]);
+        return useMemo(() => [
+            value,
+            setValueAll,
+            {
+                isPersistent,
+                removeItem() {
+                    for (const removeItemFunction of removeItemFunctions) {
+                        removeItemFunction();
+                    }
+                },
+            },
+        ], [value, setValueAll, isPersistent]);
     };
 }

es/src/useLocalStorageStateBase.js

@@ -7,4 +7,4 @@ import storage from './storage';
         return isCallable(defaultValue) ? defaultValue() : defaultValue;
-        // disabling "exhaustive-deps" on purpose. we don't want to change the default state when
-        // the `defaultValue` is changed.
+        // disabling "exhaustive-deps" because we don't want to change the default state when the
+        // `defaultValue` is changed
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -26,4 +26,4 @@ }, [key]);
                 try {
-                    // ulss = use-local-storage-state
-                    // using shorthand to make library smaller in size
+                    // - ulss = use-local-storage-state
+                    // - using shorthand to make library smaller in size
                     localStorage.setItem('__ulss', '#');
@@ -39,5 +39,5 @@ localStorage.removeItem('__ulss');
     }, [key, defaultValueForKey]);
-    const [state, setState] = useState(defaultState);
+    const [{ value, isPersistent }, setState] = useState(defaultState);
     const updateValue = useMemo(() => {
-        const fn = (newValue) => {
+        return (newValue) => {
             const isCallable = (value) => typeof value === 'function';
@@ -57,11 +57,3 @@ if (isCallable(newValue)) {
         };
-        fn.reset = () => {
-            storage.remove(key);
-            setState((state) => ({
-                value: defaultValueForKey,
-                isPersistent: state.isPersistent,
-            }));
-        };
-        return fn;
-    }, [key, defaultValueForKey]);
+    }, [key]);
     // syncs changes across tabs and iframe's
@@ -93,3 +85,16 @@ useEffect(() => {
     }, [key, defaultState]);
-    return [state.value, updateValue, state.isPersistent];
+    return useMemo(() => [
+        value,
+        updateValue,
+        {
+            isPersistent: isPersistent,
+            removeItem() {
+                storage.remove(key);
+                setState((state) => ({
+                    value: defaultValueForKey,
+                    isPersistent: state.isPersistent,
+                }));
+            },
+        },
+    ], [value, updateValue, isPersistent, key, defaultValueForKey]);
 }

package.json

 {
     "name": "use-local-storage-state",
-    "version": "10.0.0",
-    "description": "React hook that persist data in local storage. Done right.",
+    "version": "11.0.0",
+    "description": "React hook that persist data in localStorage",
     "license": "MIT",
@@ -6,0 +6,0 @@ "repository": "astoilkov/use-local-storage-state",

readme.md

@@ -70,3 +70,3 @@ # `use-local-storage-state`
 
-The `setTodos.reset()` method will reset the value to its default and will remove the key from the `localStorage`. It returns to the same state as when the hook was initially created.
+The `removeItem()` method will reset the value to its default and will remove the key from the `localStorage`. It returns to the same state as when the hook was initially created.
 
@@ -76,3 +76,3 @@ ```tsx
 
-const [todos, setTodos] = useLocalStorageState('todos', [
+const [todos, setTodos, { removeItem }] = useLocalStorageState('todos', [
     'buy milk',
@@ -82,3 +82,5 @@ 'do 50 push-ups'
 
-setTodos.reset()
+function onClick() {
+    removeItem()
+}
 ```
@@ -88,3 +90,3 @@
 
-There are a few cases when `localStorage` [isn't available](https://github.com/astoilkov/use-local-storage-state/blob/7db8872397eae8b9d2421f068283286847f326ac/index.ts#L3-L11). The `isPersistent` property tells you if the data is persisted in local storage or in-memory. Useful when you want to notify the user that their data won't be persisted.
+There are a few cases when `localStorage` [isn't available](https://github.com/astoilkov/use-local-storage-state/blob/7db8872397eae8b9d2421f068283286847f326ac/index.ts#L3-L11). The `isPersistent` property tells you if the data is persisted in `localStorage` or in-memory. Useful when you want to notify the user that their data won't be persisted.
 
@@ -96,3 +98,3 @@ ```tsx
 export default function Todos() {
-    const [todos, setTodos, isPersistent] = useLocalStorageState('todos', ['buy milk'])
+    const [todos, setTodos, { isPersistent }] = useLocalStorageState('todos', ['buy milk'])
 
@@ -113,3 +115,5 @@ return (
 
-Returns `[value, setValue, isPersistent]`. The first two are the same as `useState()`. The third(`isPersistent`) determines if the data is persisted in `localStorage` or in-memory – [example](#is-persistent-example). 
+Returns `[value, setValue, { removeItem, isPersistent }]`. The first two values are the same as `useState()`. The third value contains extra properties specific to `localStorage`:
+- `removeItem()` — [example](#reseting-to-defaults)
+- `isPersistent()` — [example]()asdfasdfasdf
 
@@ -116,0 +120,0 @@ #### key

src/createLocalStorageStateHook.d.ts

@@ -1,3 +0,3 @@
-import { UpdateState } from './useLocalStorageStateBase';
-export default function createLocalStorageStateHook<T = undefined>(key: string): () => [T | undefined, UpdateState<T | undefined>, boolean];
-export default function createLocalStorageStateHook<T>(key: string, defaultValue: T | (() => T)): () => [T, UpdateState<T>, boolean];
+import { UpdateState, LocalStorageProperties } from './useLocalStorageStateBase';
+export default function createLocalStorageStateHook<T = undefined>(key: string): () => [T | undefined, UpdateState<T | undefined>, LocalStorageProperties];
+export default function createLocalStorageStateHook<T>(key: string, defaultValue: T | (() => T)): () => [T, UpdateState<T>, LocalStorageProperties];

src/createLocalStorageStateHook.js

@@ -7,24 +7,32 @@ "use strict";
     const setValueFunctions = [];
+    const removeItemFunctions = [];
     return function useLocalStorageStateHook() {
-        const [value, setValue, isPersistent] = useLocalStorageStateBase_1.default(key, defaultValue);
-        const setValueAll = react_1.useMemo(() => {
-            const fn = (newValue) => {
-                for (const setValueFunction of setValueFunctions) {
-                    setValueFunction(newValue);
-                }
-            };
-            fn.reset = () => {
-                for (const setValueFunction of setValueFunctions) {
-                    setValueFunction.reset();
-                }
-            };
-            return fn;
+        const [value, setValue, { isPersistent, removeItem }] = useLocalStorageStateBase_1.default(key, defaultValue);
+        const setValueAll = react_1.useCallback((newValue) => {
+            for (const setValueFunction of setValueFunctions) {
+                setValueFunction(newValue);
+            }
         }, []);
         react_1.useEffect(() => {
             setValueFunctions.push(setValue);
-            return () => void setValueFunctions.splice(setValueFunctions.indexOf(setValue), 1);
-        }, [setValue]);
-        return [value, setValueAll, isPersistent];
+            removeItemFunctions.push(removeItem);
+            return () => {
+                setValueFunctions.splice(setValueFunctions.indexOf(setValue), 1);
+                removeItemFunctions.splice(removeItemFunctions.indexOf(removeItem), 1);
+            };
+        }, [setValue, removeItem]);
+        return react_1.useMemo(() => [
+            value,
+            setValueAll,
+            {
+                isPersistent,
+                removeItem() {
+                    for (const removeItemFunction of removeItemFunctions) {
+                        removeItemFunction();
+                    }
+                },
+            },
+        ], [value, setValueAll, isPersistent]);
     };
 }
 exports.default = createLocalStorageStateHook;

src/useLocalStorageState.d.ts

@@ -1,3 +0,3 @@
-import { UpdateState } from './useLocalStorageStateBase';
-export default function useLocalStorageState<T = undefined>(key: string): [T | undefined, UpdateState<T | undefined>, boolean];
-export default function useLocalStorageState<T>(key: string, defaultValue: T | (() => T)): [T, UpdateState<T>, boolean];
+import { LocalStorageProperties, UpdateState } from './useLocalStorageStateBase';
+export default function useLocalStorageState<T = undefined>(key: string): [T | undefined, UpdateState<T | undefined>, LocalStorageProperties];
+export default function useLocalStorageState<T>(key: string, defaultValue: T | (() => T)): [T, UpdateState<T>, LocalStorageProperties];

src/useLocalStorageStateBase.d.ts

@@ -0,7 +1,8 @@
+export declare type UpdateState<T> = (newValue: T | ((value: T) => T)) => void;
 export declare type SetStateParameter<T> = T | undefined | ((value: T | undefined) => T | undefined);
-export declare type UpdateState<T> = {
-    reset: () => void;
-    (newValue: T | ((value: T) => T)): void;
+export declare type LocalStorageProperties = {
+    isPersistent: boolean;
+    removeItem: () => void;
 };
-export default function useLocalStorageStateBase<T = undefined>(key: string): [T | undefined, UpdateState<T | undefined>, boolean];
-export default function useLocalStorageStateBase<T>(key: string, defaultValue: T | (() => T)): [T, UpdateState<T>, boolean];
+export default function useLocalStorageStateBase<T = undefined>(key: string): [T | undefined, UpdateState<T | undefined>, LocalStorageProperties];
+export default function useLocalStorageStateBase<T>(key: string, defaultValue: T | (() => T)): [T, UpdateState<T>, LocalStorageProperties];

src/useLocalStorageStateBase.js

@@ -9,4 +9,4 @@ "use strict";
         return isCallable(defaultValue) ? defaultValue() : defaultValue;
-        // disabling "exhaustive-deps" on purpose. we don't want to change the default state when
-        // the `defaultValue` is changed.
+        // disabling "exhaustive-deps" because we don't want to change the default state when the
+        // `defaultValue` is changed
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -28,4 +28,4 @@ }, [key]);
                 try {
-                    // ulss = use-local-storage-state
-                    // using shorthand to make library smaller in size
+                    // - ulss = use-local-storage-state
+                    // - using shorthand to make library smaller in size
                     localStorage.setItem('__ulss', '#');
@@ -41,5 +41,5 @@ localStorage.removeItem('__ulss');
     }, [key, defaultValueForKey]);
-    const [state, setState] = react_1.useState(defaultState);
+    const [{ value, isPersistent }, setState] = react_1.useState(defaultState);
     const updateValue = react_1.useMemo(() => {
-        const fn = (newValue) => {
+        return (newValue) => {
             const isCallable = (value) => typeof value === 'function';
@@ -59,11 +59,3 @@ if (isCallable(newValue)) {
         };
-        fn.reset = () => {
-            storage_1.default.remove(key);
-            setState((state) => ({
-                value: defaultValueForKey,
-                isPersistent: state.isPersistent,
-            }));
-        };
-        return fn;
-    }, [key, defaultValueForKey]);
+    }, [key]);
     // syncs changes across tabs and iframe's
@@ -95,4 +87,17 @@ react_1.useEffect(() => {
     }, [key, defaultState]);
-    return [state.value, updateValue, state.isPersistent];
+    return react_1.useMemo(() => [
+        value,
+        updateValue,
+        {
+            isPersistent: isPersistent,
+            removeItem() {
+                storage_1.default.remove(key);
+                setState((state) => ({
+                    value: defaultValueForKey,
+                    isPersistent: state.isPersistent,
+                }));
+            },
+        },
+    ], [value, updateValue, isPersistent, key, defaultValueForKey]);
 }
 exports.default = useLocalStorageStateBase;

No alert changes

Improved metrics

Total package byte prevSize

28612

increased by4.35%

Lines of code

449

increased by6.4%

Number of lines in readme file

178

increased by2.3%

No dependency changes