feat: 🎸 implement useLocalStorage without events

src/__stories__/useLocalStorage.story.tsx

@@ -1,21 +1,21 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useLocalStorage} from '..';
-import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
-  const value = useLocalStorage('key');
+  const [value, setValue] = useLocalStorage('hello-key', 'foo');
 
   return (
     <div>
       <div>Value: {value}</div>
-      <button onClick={() => {(window.localStorage as any)['key'] = String(Date.now())}}>Update</button>
+      <button onClick={() => setValue('bar')}>bar</button>
+      <button onClick={() => setValue('baz')}>baz</button>
     </div>
   );
 };
 
-// storiesOf('useLocalStorage', module)
+storiesOf('useLocalStorage', module)
   // .add('Docs', () => <ShowDocs md={require('../../docs/useLocalStorage.md')} />)
-  // .add('Demo', () =>
-    // <Demo/>
-  // )
+  .add('Demo', () =>
+    <Demo/>
+  )

src/react.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export type UseState = <T>(initialState: T) => [T, (newState: T) => void];
+export type UseState = <T>(initialState: T | (() => T)) => [T, (newState: T) => void];
 export const useState: UseState = (React as any).useState;
 
 export type UseEffect = (didUpdate: () => ((() => void) | void), params?: any[]) => void;

src/useLocalStorage.ts

@@ -1,35 +1,41 @@
 import {useState, useEffect} from './react';
-import {on, off} from './util';
+// import {on, off} from './util';
 
 const isClient = typeof window === 'object';
 
-const useLocalStorage = (key: string): string | undefined => {
+const useLocalStorage = <T>(key: string, initialValue?: T, raw?: boolean): [T, (value: T) => void] => {
   if (!isClient) {
-    return undefined;
+    return [initialValue as T, () => {}];
   }
 
-  const [state, setState] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
+  const [state, setState] = useState<T>(() => {
     try {
-      setState(localStorage[key]);
-    } catch {}
-
-    const onChange = (event) => {
-      console.log('onChange')
-      if (event.key === key) {
-        setState(event.newValue);
+      const localStorageValue = localStorage.getItem(key);
+      if (typeof localStorageValue !== 'string') {
+        localStorage.setItem(key, raw ? String(initialValue) : JSON.stringify(initialValue));
+        return initialValue;
+      } else {
+        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
+      // cat throw, too.
+      return initialValue;
     }
+  });
 
-    on(window, 'storage', onChange);
-
-    return () => {
-      off(window, 'storage', onChange);
-    };
-  }, [key]);
+  useEffect(() => {
+    try {
+      const serializedState = raw ? String(state) : JSON.stringify(state);
+      localStorage.setItem(key, serializedState);
+    } catch {
+      // If user is in private mode or has storage restriction
+      // localStorage can throw. Also JSON.stringify can throw.
+    }
+  });
 
-  return state;
+  return [state, setState];
 };
 
 export default useLocalStorage;