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

My custom hooks for working easier while developing react web app

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = useLocalStorage;
var react_1 = require("react");
function useLocalStorage(key) {
    var _a = (0, react_1.useState)(function () {
        if (typeof window === 'undefined')
            return null;
        return window.localStorage.getItem(key);
    }), data = _a[0], setData = _a[1];
    var handleSetData = (0, react_1.useCallback)(function (data) {
        setData(function (prev) { return (data !== prev ? data : prev); });
        global.window.localStorage.setItem(key, data);
    }, [key]);
    var handleResetData = (0, react_1.useCallback)(function () {
        setData(null);
        global.window.localStorage.removeItem(key);
    }, [key]);
    var handleLocalStorageChange = (0, react_1.useCallback)(function (ev) {
        if (ev.key === key && ev.newValue !== ev.oldValue) {
            setData(ev.newValue);
        }
    }, [key]);
    (0, react_1.useLayoutEffect)(function () {
        window.addEventListener('storage', handleLocalStorageChange);
        return function () {
            window.removeEventListener('storage', handleLocalStorageChange);
        };
    }, [handleLocalStorageChange]);
    return [data, handleSetData, handleResetData];
}
//# sourceMappingURL=useLocalStorage.js.map