27 lines
848 B
TypeScript
27 lines
848 B
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* usePersistentState is a React hook that syncs state with localStorage.
|
|
* @param key The key to store the value under in localStorage.
|
|
* @param initialValue The initial value to use if nothing is stored.
|
|
*/
|
|
export function usePersistentState<T>(key: string, initialValue: T): [T, (value: T) => void] {
|
|
const [state, setState] = useState<T>(() => {
|
|
if (typeof window === 'undefined') return initialValue;
|
|
try {
|
|
const item = window.localStorage.getItem(key);
|
|
return item ? (JSON.parse(item) as T) : initialValue;
|
|
} catch {
|
|
return initialValue;
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
try {
|
|
window.localStorage.setItem(key, JSON.stringify(state));
|
|
} catch {}
|
|
}, [key, state]);
|
|
|
|
return [state, setState];
|
|
}
|