feat: 🎸 do work on useLocaStorage

There is some "Illegal invocation" that I cannot immediately solve, so
postponing this hook for now.

Author: streamich

src/__stories__/useLocalStorage.story.tsx

@@ -0,0 +1,19 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useLocalStorage} from '..';
+
+const Demo = () => {
+  const value = useLocalStorage('key');
+
+  return (
+    <div>
+      <div>Value: {value}</div>
+      <button onClick={() => {(window.localStorage as any)['key'] = String(Date.now())}}>Update</button>
+    </div>
+  );
+};
+
+storiesOf('useLocalStorage', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -7,6 +7,7 @@ import useGeolocation from './useGeolocation';
 import useHover from './useHover';
 import useIdle from './useIdle';
 import useList from './useList';
+import useLocalStorage from './useLocalStorage';
 import useLocation from './useLocation';
 import useMap from './useMap';
 import useMedia from './useMedia';
@@ -33,6 +34,7 @@ export {
   useHover,
   useIdle,
   useList,
+  useLocalStorage,
   useLocation,
   useMap,
   useMedia,

src/useLocalStorage.ts

@@ -0,0 +1,35 @@
+import {useState, useEffect} from './react';
+import {on, off} from './util';
+
+const isClient = typeof window === 'object';
+
+const useLocalStorage = (key: string): string | undefined => {
+  if (!isClient) {
+    return undefined;
+  }
+
+  const [state, setState] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    try {
+      setState(localStorage[key]);
+    } catch {}
+
+    const onChange = (event) => {
+      console.log('onChange')
+      if (event.key === key) {
+        setState(event.newValue);
+      }
+    }
+
+    on(window, 'storage', onChange);
+
+    return () => {
+      off(window, 'storage', onChange);
+    };
+  }, [key]);
+
+  return state;
+};
+
+export default useLocalStorage;