react-localstorage-hooks/lib/useLocalStorageSelector/useLocalStorageSelector.js

A collection of React hooks for reactively managing localStorage

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var utils_1 = require("../utils");
;
/**
 * Hook to query an data stored in the localStorage and reactively update when it changes.
 * The hook only updates when the result of `selector` method changes.
 *
 * @param key Key of the localstorage store to be queried
 * @param selector Selector function to select items from the store
 * @param opts Options object
 * @returns Data queried by the `selector` method
 */
function useLocalStorageSelector(key, selector, opts) {
    var options = tslib_1.__assign({ equalityFn: function (prev, next) { return prev === next; } }, opts);
    var _a = react_1.useState(function () { return typeof window !== 'undefined' ? selector(utils_1.deserialize(window.localStorage.getItem(key))) : undefined; }), state = _a[0], setState = _a[1];
    var handleStorage = react_1.useCallback(function (event) {
        if (event.key !== key)
            return;
        var selectedData = selector(utils_1.deserialize(event.newValue));
        if (!options.equalityFn(state, selectedData)) {
            setState(selectedData);
        }
    }, [state, key, setState]);
    react_1.useEffect(function () {
        if (typeof window === 'undefined')
            return;
        window.addEventListener('storage', handleStorage);
        return function () { return window.removeEventListener('storage', handleStorage); };
    }, [key, setState, handleStorage]);
    return state;
}
exports.default = useLocalStorageSelector;