diff options
author | Sebastian <sebasjm@gmail.com> | 2022-12-07 15:44:43 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-12-07 16:08:19 -0300 |
commit | 1c6369677ab272196da314d95825273c6fff8d5f (patch) | |
tree | b80943be82d42c841f9390c95b602d0fecb96234 /packages/web-util/src | |
parent | d2554bedf3984ba4eb3a52b5649daa9c7c686c39 (diff) | |
download | wallet-core-1c6369677ab272196da314d95825273c6fff8d5f.tar.xz |
feature: useLocalStorage also update when the localStorage has been updated from other window
Diffstat (limited to 'packages/web-util/src')
-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); |