@redocly/theme
Version:
Shared UI components lib
36 lines • 1.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useLocalState = useLocalState;
const react_1 = require("react");
const js_utils_1 = require("../utils/js-utils");
function getStoredValue(key, fallback) {
if (!(0, js_utils_1.isBrowser)())
return fallback;
try {
const savedValue = localStorage.getItem(key);
return savedValue ? JSON.parse(savedValue) : fallback;
}
catch (_a) {
return fallback;
}
}
function useLocalState(key, initialValue) {
const [value, setValue] = (0, react_1.useState)(initialValue);
// Load stored value from localStorage after component mounts
// This ensures SSR compatibility: server and client both start with initialValue,
// then client loads the actual stored value without hydration mismatch
(0, react_1.useEffect)(() => {
if (!(0, js_utils_1.isBrowser)())
return;
setValue(getStoredValue(key, initialValue));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [key]);
const handleSetValue = (0, react_1.useCallback)((newValue) => {
setValue(newValue);
if ((0, js_utils_1.isBrowser)()) {
localStorage.setItem(key, JSON.stringify(newValue));
}
}, [key]);
return [value, handleSetValue];
}
//# sourceMappingURL=use-local-state.js.map