Merge pull request #30 from VitorLuizC/master

Watch changes on storage and change state (closes #27)

src/index.ts

@@ -1,17 +1,38 @@
-import { Dispatch, useState } from 'react';
+import { Dispatch, useCallback, useEffect, useState } from 'react';
 
 export default function useLocalStorage(
   key: string,
   initialValue: string = ''
 ): [string, Dispatch<string>] {
   const [value, setValue] = useState(
-    () => localStorage.getItem(key) || initialValue
+    () => window.localStorage.getItem(key) || initialValue
   );
 
   const setItem = (newValue: string) => {
     setValue(newValue);
     window.localStorage.setItem(key, newValue);
   };
 
+  useEffect(() => {
+    const newValue = window.localStorage.getItem(key);
+    if (value !== newValue) {
+      setValue(newValue || initialValue);
+    }
+  });
+
+  const handleStorage = useCallback(
+    (event: StorageEvent) => {
+      if (event.key === key && event.newValue !== value) {
+        setValue(event.newValue || initialValue);
+      }
+    },
+    [value]
+  );
+
+  useEffect(() => {
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, [handleStorage]);
+
   return [value, setItem];
 }