Merge pull request #835 from suyingtao/master

feat(useLocalStorage): add remove method. (#229)

docs/useLocalStorage.md

@@ -9,13 +9,14 @@ React side-effect hook that manages a single `localStorage` key.
 import {useLocalStorage} from 'react-use';
 
 const Demo = () => {
-  const [value, setValue] = useLocalStorage('my-key', 'foo');
+  const [value, setValue, remove] = useLocalStorage('my-key', 'foo');
 
   return (
     <div>
       <div>Value: {value}</div>
       <button onClick={() => setValue('bar')}>bar</button>
       <button onClick={() => setValue('baz')}>baz</button>
+      <button onClick={() => remove()}>Remove</button>
     </div>
   );
 };

src/useLocalStorage.ts

@@ -1,23 +1,32 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { isClient } from './util';
 
 type Dispatch<A> = (value: A) => void;
 type SetStateAction<S> = S | ((prevState: S) => S);
 
-const useLocalStorage = <T>(key: string, initialValue?: T, raw?: boolean): [T, Dispatch<SetStateAction<T>>] => {
+const noop = () => {};
+const isUndefined = (value?: any): boolean => typeof value === 'undefined';
+
+const useLocalStorage = <T>(
+  key: string,
+  initialValue?: T,
+  raw?: boolean
+): [T | undefined, Dispatch<SetStateAction<T | undefined>>, () => void] => {
   if (!isClient) {
-    return [initialValue as T, () => {}];
+    return [initialValue as T, noop, noop];
   }
 
-  const [state, setState] = useState<T>(() => {
+  const [state, setState] = useState<T | undefined>(() => {
     try {
       const localStorageValue = localStorage.getItem(key);
+      if (isUndefined(initialValue)) {
+        return undefined;
+      }
       if (typeof localStorageValue !== 'string') {
         localStorage.setItem(key, raw ? String(initialValue) : JSON.stringify(initialValue));
         return initialValue;
-      } else {
-        return raw ? localStorageValue : JSON.parse(localStorageValue || 'null');
       }
+      return raw ? localStorageValue : JSON.parse(localStorageValue || 'null');
     } catch {
       // If user is in private mode or has storage restriction
       // localStorage can throw. JSON.parse and JSON.stringify
@@ -26,7 +35,18 @@ const useLocalStorage = <T>(key: string, initialValue?: T, raw?: boolean): [T, D
     }
   });
 
+  const remove = useCallback(() => {
+    try {
+      localStorage.removeItem(key);
+      setState(undefined);
+    } catch {
+      // If user is in private mode or has storage restriction
+      // localStorage can throw.
+    }
+  }, [key, setState]);
+
   useEffect(() => {
+    if (isUndefined(state)) return;
     try {
       const serializedState = raw ? String(state) : JSON.stringify(state);
       localStorage.setItem(key, serializedState);
@@ -35,8 +55,7 @@ const useLocalStorage = <T>(key: string, initialValue?: T, raw?: boolean): [T, D
       // localStorage can throw. Also JSON.stringify can throw.
     }
   }, [state]);
-
-  return [state, setState];
+  return [state, setState, remove];
 };
 
 export default useLocalStorage;

stories/useLocalStorage.story.tsx

@@ -5,12 +5,19 @@ import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const [value, setValue] = useLocalStorage('hello-key', 'foo');
+  const [removableValue, setRemovableValue, remove] = useLocalStorage('removeable-key');
 
   return (
     <div>
       <div>Value: {value}</div>
       <button onClick={() => setValue('bar')}>bar</button>
       <button onClick={() => setValue('baz')}>baz</button>
+      <br />
+      <br />
+      <div>Removable Value: {removableValue}</div>
+      <button onClick={() => setRemovableValue('foo')}>foo</button>
+      <button onClick={() => setRemovableValue('bar')}>bar</button>
+      <button onClick={() => remove()}>Remove</button>
     </div>
   );
 };