feature: add a reset function to useLocalStorage

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.demo.tsx

@@ -1,7 +1,7 @@
 import { useLocalStorage } from './useLocalStorage'
 
 export default function Component() {
-  const [value, setValue] = useLocalStorage('test-key', 0)
+  const [value, setValue, reset] = useLocalStorage('test-key', 0)
 
   return (
     <div>
@@ -20,6 +20,13 @@ export default function Component() {
       >
         Decrement
       </button>
+      <button
+        onClick={() => {
+          reset()
+        }}
+      >
+        Reset
+      </button>
     </div>
   )
 }

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.test.ts

@@ -128,6 +128,49 @@ describe('useLocalStorage()', () => {
     expect(window.localStorage.getItem('count')).toEqual('5')
   })
 
+  it('Reset the state with static initial value', () => {
+    const { result } = renderHook(() => useLocalStorage('count', 2))
+
+    act(() => {
+      const setState = result.current[1]
+      const reset = result.current[2]
+      setState(prev => prev + 1)
+      setState(prev => prev + 1)
+      setState(prev => prev + 1)
+      reset()
+    })
+
+    expect(result.current[0]).toBe(2)
+    expect(window.localStorage.getItem('count')).toEqual('2')
+  })
+
+  it('Reset the state with initial value as a function', () => {
+    const { result } = renderHook(() =>
+      useLocalStorage('count', () => ({
+        id: 1,
+        name: 'Joe',
+      })),
+    )
+
+    act(() => {
+      const setState = result.current[1]
+      const reset = result.current[2]
+      setState({
+        id: 2,
+        name: 'Jane',
+      })
+      reset()
+    })
+
+    expect(result.current[0]).toEqual({
+      id: 1,
+      name: 'Joe',
+    })
+    expect(window.localStorage.getItem('count')).toEqual(
+      '{"id":1,"name":"Joe"}',
+    )
+  })
+
   it('[Event] Update one hook updates the others', () => {
     const initialValues: [string, unknown] = ['key', 'initial']
     const { result: A } = renderHook(() => useLocalStorage(...initialValues))

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts

@@ -28,7 +28,7 @@ const IS_SERVER = typeof window === 'undefined'
  * @param {?boolean} [options.initializeWithValue] - If `true` (default), the hook will initialize reading the local storage. In SSR, you should set it to `false`, returning the initial value initially.
  * @param {?((value: T) => string)} [options.serializer] - A function to serialize the value before storing it.
  * @param {?((value: string) => T)} [options.deserializer] - A function to deserialize the stored value.
- * @returns {[T, Dispatch<SetStateAction<T>>]} A tuple containing the stored value and a function to set the value.
+ * @returns {[T, Dispatch<SetStateAction<T>>, () => void]} A tuple containing the stored value and a function to set the value.
  * @see [Documentation](https://usehooks-ts.com/react-hook/use-local-storage)
  * @see [MDN Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
  * @example
@@ -39,7 +39,7 @@ export function useLocalStorage<T>(
   key: string,
   initialValue: T | (() => T),
   options: UseLocalStorageOptions<T> = {},
-): [T, Dispatch<SetStateAction<T>>] {
+): [T, Dispatch<SetStateAction<T>>, () => void] {
   const { initializeWithValue = true } = options
 
   const serializer = useCallback<(value: T) => string>(
@@ -133,6 +133,17 @@ export function useLocalStorage<T>(
     }
   })
 
+  const resetValue = useCallback(() => {
+    try {
+      const initialValueToUse =
+        initialValue instanceof Function ? initialValue() : initialValue
+
+      setValue(initialValueToUse)
+    } catch (error) {
+      console.warn(`Error resetting localStorage key “${key}”:`, error)
+    }
+  }, [initialValue, setValue, key])
+
   useEffect(() => {
     setStoredValue(readValue())
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -155,5 +166,5 @@ export function useLocalStorage<T>(
   // See: useLocalStorage()
   useEventListener('local-storage', handleStorageChange)
 
-  return [storedValue, setValue]
+  return [storedValue, setValue, resetValue]
 }