forked from github/plane
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
|
|
const getValueFromLocalStorage = (key: string, defaultValue: any) => {
|
|
try {
|
|
const item = window.localStorage.getItem(key);
|
|
return item ? JSON.parse(item) : defaultValue;
|
|
} catch (error) {
|
|
window.localStorage.removeItem(key);
|
|
return defaultValue;
|
|
}
|
|
};
|
|
|
|
const useLocalStorage = <T,>(key: string, initialValue: T) => {
|
|
const [storedValue, setStoredValue] = useState<T | null>(() =>
|
|
getValueFromLocalStorage(key, initialValue)
|
|
);
|
|
|
|
const setValue = useCallback(
|
|
(value: T) => {
|
|
window.localStorage.setItem(key, JSON.stringify(value));
|
|
setStoredValue(value);
|
|
window.dispatchEvent(new Event(`local-storage:${key}`));
|
|
},
|
|
[key]
|
|
);
|
|
|
|
const clearValue = useCallback(() => {
|
|
window.localStorage.removeItem(key);
|
|
setStoredValue(null);
|
|
window.dispatchEvent(new Event(`local-storage:${key}`));
|
|
}, [key]);
|
|
|
|
const reHydrate = useCallback(() => {
|
|
const data = getValueFromLocalStorage(key, initialValue);
|
|
setStoredValue(data);
|
|
}, [key, initialValue]);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener(`local-storage:${key}`, reHydrate);
|
|
return () => {
|
|
window.removeEventListener(`local-storage:${key}`, reHydrate);
|
|
};
|
|
}, [key, reHydrate]);
|
|
|
|
return { storedValue, setValue, clearValue } as const;
|
|
};
|
|
|
|
export default useLocalStorage;
|