91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
/**
|
|
* Hook for persisting state in localStorage with SSR support.
|
|
*
|
|
* @param key - The localStorage key
|
|
* @param initialValue - Initial value if nothing is stored
|
|
* @returns Tuple of [value, setValue, removeValue]
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* const [theme, setTheme, removeTheme] = useLocalStorage('theme', 'light');
|
|
*
|
|
* // setTheme automatically persists to localStorage
|
|
* setTheme('dark');
|
|
*
|
|
* // Remove from localStorage
|
|
* removeTheme();
|
|
* ```
|
|
*/
|
|
export function useLocalStorage<T>(
|
|
key: string,
|
|
initialValue: T
|
|
): [T, (value: T | ((prev: T) => T)) => void, () => void] {
|
|
// Get initial value from localStorage or use provided initial value
|
|
const [storedValue, setStoredValue] = useState<T>(() => {
|
|
if (typeof window === 'undefined') {
|
|
return initialValue;
|
|
}
|
|
|
|
try {
|
|
const item = window.localStorage.getItem(key);
|
|
return item ? JSON.parse(item) : initialValue;
|
|
} catch (error) {
|
|
console.warn(`Error reading localStorage key "${key}":`, error);
|
|
return initialValue;
|
|
}
|
|
});
|
|
|
|
// Setter function that also persists to localStorage
|
|
const setValue = useCallback(
|
|
(value: T | ((prev: T) => T)) => {
|
|
try {
|
|
// Allow value to be a function for same API as useState
|
|
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
setStoredValue(valueToStore);
|
|
|
|
if (typeof window !== 'undefined') {
|
|
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
}
|
|
} catch (error) {
|
|
console.warn(`Error setting localStorage key "${key}":`, error);
|
|
}
|
|
},
|
|
[key, storedValue]
|
|
);
|
|
|
|
// Remove function to clear the value from localStorage
|
|
const removeValue = useCallback(() => {
|
|
try {
|
|
setStoredValue(initialValue);
|
|
if (typeof window !== 'undefined') {
|
|
window.localStorage.removeItem(key);
|
|
}
|
|
} catch (error) {
|
|
console.warn(`Error removing localStorage key "${key}":`, error);
|
|
}
|
|
}, [key, initialValue]);
|
|
|
|
// Sync with other tabs/windows
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
const handleStorageChange = (e: StorageEvent) => {
|
|
if (e.key === key && e.newValue !== null) {
|
|
try {
|
|
setStoredValue(JSON.parse(e.newValue));
|
|
} catch (error) {
|
|
console.warn(`Error parsing localStorage change for "${key}":`, error);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener('storage', handleStorageChange);
|
|
return () => window.removeEventListener('storage', handleStorageChange);
|
|
}, [key]);
|
|
|
|
return [storedValue, setValue, removeValue];
|
|
}
|
|
|
|
export default useLocalStorage;
|