✨ new storeDefault option #1

astoilkov · Aug 7, 2024 · b145e6c · b145e6c
1 parent f8f7650
commit b145e6c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/useStorageState.ts b/src/useStorageState.ts
@@ -5,6 +5,7 @@ export type StorageStateOptions<T> = {
     defaultValue?: T | (() => T)
     storage?: Storage
     sync?: boolean
+    storeDefault?: boolean
     serializer?: {
         stringify: (value: unknown) => string
         parse: (value: string) => unknown
@@ -42,6 +43,7 @@ export default function useStorageState<T = undefined>(
         defaultValue,
         options?.storage,
         options?.sync,
+        options?.storeDefault,
         serializer?.parse,
         serializer?.stringify,
     )
@@ -52,13 +54,14 @@ function useStorage<T>(
     defaultValue: T | undefined,
     storage: Storage = goodTry(() => localStorage) ?? sessionStorage,
     sync: boolean = true,
+    storeDefault: boolean = false,
     parse: (value: string) => unknown = parseJSON,
     stringify: (value: unknown) => string = JSON.stringify,
 ): StorageState<T | undefined> {
     // we keep the `parsed` value in a ref because `useSyncExternalStore` requires a cached version
     const storageItem = useRef<{ string: string | null; parsed: T | undefined }>({
         string: null,
-        parsed: undefined,
+        parsed: defaultValue,
     })
 
     const value = useSyncExternalStore(
@@ -101,7 +104,7 @@ function useStorage<T>(
             //   issues that were caused by incorrect initial and secondary implementations:
             //   - https://github.com/astoilkov/use-local-storage-state/issues/30
             //   - https://github.com/astoilkov/use-local-storage-state/issues/33
-            if (defaultValue !== undefined && string === null) {
+            if (storeDefault && defaultValue !== undefined && string === null) {
                 // reasons for `localStorage` to throw an error:
                 // - maximum quota is exceeded
                 // - under Mobile Safari (since iOS 5) when the user enters private mode

diff --git a/test/browser.test.tsx b/test/browser.test.tsx
@@ -58,7 +58,10 @@ describe('useLocalStorageState()', () => {
     })
 
     test(`initial state is written to localStorage`, () => {
-        renderHook(() => useStorageState('todos', { defaultValue: ['first', 'second'] }))
+        renderHook(() => useStorageState('todos', {
+            storeDefault: true,
+            defaultValue: ['first', 'second']
+        }))
 
         expect(localStorage.getItem('todos')).toStrictEqual(JSON.stringify(['first', 'second']))
     })
@@ -371,7 +374,10 @@ describe('useLocalStorageState()', () => {
         let key = 'todos1'
 
         const { rerender } = renderHook(() =>
-            useStorageState(key, { defaultValue: ['first', 'second'] }),
+            useStorageState(key, {
+                storeDefault: true,
+                defaultValue: ['first', 'second']
+            }),
         )
 
         key = 'todos2'
@@ -640,6 +646,7 @@ describe('useLocalStorageState()', () => {
             const { result, rerender } = renderHook(({ memory }: { memory: 'session' | 'local'}) =>
                 useStorageState<number>('count', {
                     defaultValue: 0,
+                    storeDefault: true,
                     storage: memory === 'session' ? sessionStorage : localStorage,
                 }),
                 {