48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
/**
|
|
* Custom hook for persisting state in local storage.
|
|
*
|
|
* This hook works similarly to the standard `useState` hook but also stores the state in local storage,
|
|
* allowing the state to persist across browser sessions. The state is initialized from local storage
|
|
* if it exists; otherwise, it falls back to the provided initial value.
|
|
*
|
|
* @template T The type of the value to be stored.
|
|
* @param {string} key The key under which the value is stored in local storage.
|
|
* @param {T} initialValue The initial value to be used if there is no item in local storage with the given key.
|
|
* @returns {[T, (value: T | ((val: T) => T)) => void]} A tuple containing:
|
|
* - `storedValue`: the current value stored in local storage.
|
|
* - `setValue`: a function to set the value, which updates both the local state and local storage.
|
|
*
|
|
* @example
|
|
* const [name, setName] = useLocalStorage<string>("name", "Initial Name");
|
|
* // Use setName to update the name and it will be stored in local storage.
|
|
*/
|
|
const useLocalStorage = <T>(
|
|
key: string,
|
|
initialValue: T,
|
|
): [T, (value: T) => void] => {
|
|
const [storedValue, setStoredValue] = useState<T>(() => {
|
|
try {
|
|
const item = window.localStorage.getItem(key);
|
|
return item ? JSON.parse(item) : initialValue;
|
|
} catch (error) {
|
|
console.log(error);
|
|
return initialValue;
|
|
}
|
|
});
|
|
|
|
const setValue = (value: T) => {
|
|
try {
|
|
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
setStoredValue(valueToStore);
|
|
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
return [storedValue, setValue];
|
|
};
|
|
|
|
export default useLocalStorage;
|