feat: useLocalStorage setState support funtion

packages/local-storage/src/__tests__/index.test.js

@@ -79,6 +79,16 @@ describe('with localStorage', () => {
         expect(result.current[0]).toBe('foo');
     });
 
+    test('set new value through function', () => {
+        const {result} = renderHook(() => useLocalStorage('foo', {bar: 1}));
+        act(() => result.current[1](value => {
+            const newValue = {...value};
+            newValue.bar = 2;
+            return newValue;
+        }));
+        expect(result.current[0].bar).toBe(2);
+    });
+
     test('ignore session storage change', () => {
         const {result} = renderHook(() => useLocalStorage('foo', 'bar'));
         const event = new StorageEvent('storage', {

packages/local-storage/src/index.ts

@@ -14,15 +14,19 @@ function getStorage<T>(key: string, initialValue: T): T {
     }
 }
 
+const isFunction = (value: unknown): value is (...args: any) => any =>
+    typeof value === 'function';
+
 export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
     const [value, setValue] = useState(() => getStorage<T>(key, initialValue));
     const setStorageValue = useCallback(
-        (value: T) => {
+        (newValue: T | ((prevValue?: T) => T)) => {
+            const currentValue = isFunction(newValue) ? newValue(value) : newValue;
             // eslint-disable-next-line no-unused-expressions
-            window?.localStorage?.setItem(key, JSON.stringify(value));
-            setValue(value);
+            window?.localStorage?.setItem(key, JSON.stringify(currentValue));
+            setValue(currentValue);
         },
-        [key]
+        [key, value]
     );
     useEffect(
         () => {