minh-custom-hooks-release/dist/esm/hooks/useLocalStorage.js

My custom hooks for working easier while developing react web app

import { useCallback, useLayoutEffect, useState } from 'react';
export default function useLocalStorage(key) {
    var _a = useState(function () {
        if (typeof window === 'undefined')
            return null;
        return window.localStorage.getItem(key);
    }), data = _a[0], setData = _a[1];
    var handleSetData = useCallback(function (data) {
        setData(function (prev) { return (data !== prev ? data : prev); });
        global.window.localStorage.setItem(key, data);
    }, [key]);
    var handleResetData = useCallback(function () {
        setData(null);
        global.window.localStorage.removeItem(key);
    }, [key]);
    var handleLocalStorageChange = useCallback(function (ev) {
        if (ev.key === key && ev.newValue !== ev.oldValue) {
            setData(ev.newValue);
        }
    }, [key]);
    useLayoutEffect(function () {
        window.addEventListener('storage', handleLocalStorageChange);
        return function () {
            window.removeEventListener('storage', handleLocalStorageChange);
        };
    }, [handleLocalStorageChange]);
    return [data, handleSetData, handleResetData];
}
//# sourceMappingURL=useLocalStorage.js.map