export const useLocalStorageState = <T, K = any>( key: string, defaultValue: T | null, mutationFn: (value: T, optionalValue?: K) => T ) => { const localStorageValue = useLocalStorage<T>(key, (value) => { return value !== null ? JSON.parse(value) : defaultValue; }); const [stateValue, setStateValue] = useState(localStorageValue); const setLocalStorageValue = (optionalValue?: K) => { const mutatedValue = mutationFn(stateValue, optionalValue); window.localStorage.setItem(key, JSON.stringify(mutatedValue)); setStateValue(mutatedValue); }; return { value: localStorageValue, set: setLocalStorageValue }; };
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter