aboutsummaryrefslogtreecommitdiff
path: root/packages/web-util
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-12-07 15:44:43 -0300
committerSebastian <sebasjm@gmail.com>2022-12-07 16:08:19 -0300
commit1c6369677ab272196da314d95825273c6fff8d5f (patch)
treeb80943be82d42c841f9390c95b602d0fecb96234 /packages/web-util
parentd2554bedf3984ba4eb3a52b5649daa9c7c686c39 (diff)
feature: useLocalStorage also update when the localStorage has been updated from other window
Diffstat (limited to 'packages/web-util')
-rw-r--r--packages/web-util/src/hooks/useLocalStorage.ts30
1 files changed, 29 insertions, 1 deletions
diff --git a/packages/web-util/src/hooks/useLocalStorage.ts b/packages/web-util/src/hooks/useLocalStorage.ts
index ed5b491f2..25df9dfcd 100644
--- a/packages/web-util/src/hooks/useLocalStorage.ts
+++ b/packages/web-util/src/hooks/useLocalStorage.ts
@@ -19,7 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { StateUpdater, useState } from "preact/hooks";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
export function useLocalStorage(
key: string,
@@ -33,6 +33,16 @@ export function useLocalStorage(
},
);
+ useEffect(() => {
+ const listener = buildListenerForKey(key, (newValue) => {
+ setStoredValue(newValue ?? initialValue)
+ })
+ window.addEventListener('storage', listener)
+ return () => {
+ window.removeEventListener('storage', listener)
+ }
+ }, [])
+
const setValue = (
value?: string | ((val?: string) => string | undefined),
): void => {
@@ -52,6 +62,13 @@ export function useLocalStorage(
return [storedValue, setValue];
}
+function buildListenerForKey(key: string, onUpdate: (newValue: string | undefined) => void): () => void {
+ return function listenKeyChange() {
+ const value = window.localStorage.getItem(key)
+ onUpdate(value ?? undefined)
+ }
+}
+
//TODO: merge with the above function
export function useNotNullLocalStorage(
key: string,
@@ -63,6 +80,17 @@ export function useNotNullLocalStorage(
: initialValue;
});
+
+ useEffect(() => {
+ const listener = buildListenerForKey(key, (newValue) => {
+ setStoredValue(newValue ?? initialValue)
+ })
+ window.localStorage.addEventListener('storage', listener)
+ return () => {
+ window.localStorage.removeEventListener('storage', listener)
+ }
+ })
+
const setValue = (value: string | ((val: string) => string)): void => {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);