diff options
Diffstat (limited to 'packages/web-util/src/hooks')
-rw-r--r-- | packages/web-util/src/hooks/useLocalStorage.ts | 30 |
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); |