react-use-storage-state
Version:
React use hook for shared and persisted state
126 lines • 4.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useStorageState = void 0;
var react_1 = require("react");
var defaultSuffix = ':default';
function useStorageState(key, initialState, storageArea) {
if (storageArea === void 0) { storageArea = localStorage; }
var loadState = (0, react_1.useCallback)(function loadState() {
var initialValue = typeof initialState === 'function'
? initialState()
: initialState;
var initialText = null;
try {
initialText = JSON.stringify(initialValue);
}
catch (error) {
console.error('failed to encode initial state:', error);
}
var defaultKey = key + defaultSuffix;
var defaultText = null;
try {
defaultText = storageArea.getItem(defaultKey);
}
catch (error) {
console.error('failed to load default state:', error);
}
if (initialText !== null && defaultText !== initialText) {
try {
storageArea.setItem(defaultKey, initialText);
storageArea.setItem(key, initialText);
}
catch (error) {
console.error('failed to store initial state:', error);
}
return initialValue;
}
var prevStateText = null;
try {
prevStateText = storageArea.getItem(key);
}
catch (error) {
console.error('failed to load previous state:', error);
}
if (prevStateText === null) {
return initialValue;
}
try {
var prevValue = JSON.parse(prevStateText);
return prevValue;
}
catch (error) {
console.error('failed to decode previous state:', error);
return initialValue;
}
}, [storageArea, initialState, key]);
var _a = (0, react_1.useState)(loadState), state = _a[0], setState = _a[1];
var applyUpdate = (0, react_1.useCallback)(function (newState) {
var text;
try {
text = JSON.stringify(newState);
}
catch (error) {
console.error('failed to encode state:', error);
return;
}
try {
storageArea.setItem(key, text);
}
catch (error) {
console.error('failed to save state:', error);
}
try {
var event_1;
if (storageArea instanceof Storage) {
event_1 = Object.assign(new StorageEvent('storage', {
key: key,
storageArea: storageArea,
newValue: text,
}), { sourceSetState: setState });
}
else {
event_1 = Object.assign(new Event('storage'), {
key: key,
storageArea: storageArea,
newValue: text,
sourceSetState: setState,
});
}
window.dispatchEvent(event_1);
}
catch (error) {
console.error('failed to dispatch storage event:', error);
}
try {
}
catch (error) { }
}, [storageArea, key]);
var saveState = (0, react_1.useCallback)(function saveState(newState) {
if (typeof newState === 'function') {
setState(function (prevState) {
var newStateValue = newState(prevState);
applyUpdate(newStateValue);
return newStateValue;
});
}
else {
applyUpdate(newState);
setState(newState);
}
}, [applyUpdate]);
(0, react_1.useEffect)(function () {
function onStorage(event) {
if (event.key === key &&
event.storageArea === storageArea &&
event.sourceSetState !== setState) {
setState(loadState());
}
}
window.addEventListener('storage', onStorage);
return function () { return window.removeEventListener('storage', onStorage); };
}, [key, loadState, storageArea]);
return [state, saveState];
}
exports.useStorageState = useStorageState;
exports.default = useStorageState;
//# sourceMappingURL=use-storage-state.js.map