@excentone/spfx-react/lib/hooks/useClientStorage.js

Contains custom ReactJs components and hooks intended to use when developing SharePoint Framework (SPFx) Web components.

import { useBoolean } from "@fluentui/react-hooks";
import { useCallback, useEffect, useState } from "react";
const useClientStorage = (key, storageName, initialState, storage) => {
    const [state, setState] = useState(initialState);
    const resetState = useCallback(() => setState({ ...initialState }), []);
    const [initializing, { setFalse: initializationDone }] = useBoolean(true);
    useEffect(() => {
        if (initializing && key && initialState) {
            console.info(`[${key}]: Using ${storageName} storage`);
            console.info(`[${key}]: Initial State: `, initialState);
            const value = storage.getItem(key);
            if (!value) {
                console.info(`[${key}]: Item doesn't exist in the ${storageName} storage. Adding key with initial value.`);
                storage.setItem(key, JSON.stringify(initialState));
            }
            setState(JSON.parse(value));
            initializationDone();
        }
    }, [key, initialState]);
    useEffect(() => {
        if (!initializing && state) {
            const value = JSON.stringify(state);
            console.log(`[${key}]: ${value}`);
            storage.setItem(key, value);
        }
    }, [state]);
    return [state, { setState, resetState }];
};
export const useLocalStorage = (key, initialValue) => useClientStorage(key, 'Local', initialValue, localStorage);
export const useSessionStorage = (key, initialValue) => useClientStorage(key, 'Session', initialValue, sessionStorage);

//# sourceMappingURL=useClientStorage.js.map