@supunlakmal/hooks
Version:
A collection of reusable React hooks
67 lines • 2.82 kB
JavaScript
import { useState, useEffect, useCallback } from 'react';
/**
* A hook that manages state with localStorage, automatically syncing between state and storage.
*
* @param key - The localStorage key to store the value under
* @param initialValue - The initial value to use if no value is found in localStorage
* @returns A tuple containing the current value and a function to update it
*/
export const useLocalStorage = (key, initialValue) => {
// Create state to store our value
// Pass initialState function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
if (typeof window === 'undefined') {
return initialValue;
}
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
}
catch (error) {
// If error also return initialValue
console.error(`Error reading localStorage key "${key}":`, error);
return initialValue;
}
});
// Return a wrapped version of useState's setter function that
// persists the new value to localStorage.
const setValue = useCallback((value) => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore = value instanceof Function ? value(storedValue) : value;
// Save state
setStoredValue(valueToStore);
// Save to local storage
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, JSON.stringify(valueToStore));
}
}
catch (error) {
console.error(`Error setting localStorage key "${key}":`, error);
}
}, [key, storedValue]);
// Listen for changes to this localStorage key in other tabs/windows
useEffect(() => {
function handleStorageChange(event) {
if (event.key === key && event.newValue) {
try {
// When local storage changes, update the state
setStoredValue(JSON.parse(event.newValue));
}
catch (error) {
console.error(`Error parsing localStorage change for key "${key}":`, error);
}
}
}
// Add event listener for 'storage' events
if (typeof window !== 'undefined') {
window.addEventListener('storage', handleStorageChange);
return () => window.removeEventListener('storage', handleStorageChange);
}
return undefined;
}, [key]);
return [storedValue, setValue];
};
//# sourceMappingURL=useLocalStorage.js.map