@gravitywelluk/react-hooks/dist/useLocalStorage.js

Library of commonly used React hooks

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useLocalStorage = void 0;
const React = __importStar(require("react"));
const debug_1 = require("@gravitywelluk/debug");
const logger = (0, debug_1.createDebug)("LOCAL_STORAGE");
/**
 * Use local storage hook
 */
const useLocalStorage = (key, initialValue) => {
    // State to store our value
    // Pass initial state function to useState so logic is only executed once
    const [storedValue, setStoredValue] = React.useState(() => {
        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
            logger.error(error);
            return initialValue;
        }
    });
    // Return a wrapped version of useState's setter function that persists
    // the new value to localStorage.
    // can pass a callback to avoid useEffect loops if updating an existing value
    const setValue = React.useCallback(valueOrCallback => {
        try {
            // standard use case (object)
            if (typeof valueOrCallback === "object") {
                const value = valueOrCallback;
                // Save state
                setStoredValue(value);
                // Save to local storage
                window.localStorage.setItem(key, JSON.stringify(value));
                // if a callback is passed
            }
            else {
                // type discrimination doesn't work properly here so need to cast
                const updateStoredValueCallback = valueOrCallback;
                setStoredValue(currentValue => {
                    const updatedValue = updateStoredValueCallback(currentValue);
                    window.localStorage.setItem(key, JSON.stringify(updatedValue));
                    return updatedValue;
                });
            }
        }
        catch (error) {
            // A more advanced implementation would handle the error case
            logger.error(error);
        }
    }, [key]);
    return [storedValue, setValue];
};
exports.useLocalStorage = useLocalStorage;