diff options
Diffstat (limited to 'src/utils/hooks/use-local-storage/use-local-storage.ts')
| -rw-r--r-- | src/utils/hooks/use-local-storage/use-local-storage.ts | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/src/utils/hooks/use-local-storage/use-local-storage.ts b/src/utils/hooks/use-local-storage/use-local-storage.ts new file mode 100644 index 0000000..47b98ff --- /dev/null +++ b/src/utils/hooks/use-local-storage/use-local-storage.ts @@ -0,0 +1,38 @@ +import { useEffect, useState } from 'react'; +import { LocalStorage } from '../../../services/local-storage'; +import type { Validator } from '../../../types'; + +const getInitialValueOrFallback = <T>( + key: string, + fallbackValue: T, + validator: Validator<T> +) => { + if (typeof window === 'undefined') return fallbackValue; + const storedValue = LocalStorage.get(key); + + return validator(storedValue) ? storedValue : fallbackValue; +}; + +/** + * Use the local storage. + * + * @param {string} key - The storage local key. + * @param {T} fallbackValue - A fallback value if local storage is empty. + * @param {Validator<T>} validator - A function to validate the stored value. + * @returns A tuple with the value and a setter. + */ +export const useLocalStorage = <T>( + key: string, + fallbackValue: T, + validator: Validator<T> +) => { + const [value, setValue] = useState( + getInitialValueOrFallback(key, fallbackValue, validator) + ); + + useEffect(() => { + LocalStorage.set(key, value); + }, [key, value]); + + return [value, setValue] as const; +}; |
