UNPKG

@yamada-ui/use-local-storage

Version:

Yamada UI useLocalStorage custom hook

124 lines (123 loc) 4.47 kB
"use client" "use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/index.ts var index_exports = {}; __export(index_exports, { createStorage: () => createStorage, useLocalStorage: () => useLocalStorage }); module.exports = __toCommonJS(index_exports); var import_use_window_event = require("@yamada-ui/use-window-event"); var import_utils = require("@yamada-ui/utils"); var import_react = require("react"); var serializeJSON = (value, name) => { try { return JSON.stringify(value); } catch { throw new Error(`useLocalStorage ${name}: Failed to serialize the value`); } }; var deserializeJSON = (value) => { if (!value) return value; try { return JSON.parse(value); } catch { return value; } }; var createStorage = (type, name) => { const eventName = type === "localStorage" ? "ui-local-storage" : "ui-session-storage"; return ({ key, defaultValue = void 0, deserialize = deserializeJSON, getInitialValueInEffect = true, serialize = (value) => serializeJSON(value, name) }) => { const readStorageValue = (0, import_react.useCallback)( (skipStorage) => { if (typeof window === "undefined" || !(type in window) || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition window[type] == null || skipStorage) { return defaultValue != null ? defaultValue : ""; } const storageValue = window[type].getItem(key); return storageValue !== null ? deserialize(storageValue) : defaultValue != null ? defaultValue : ""; }, [key, deserialize, defaultValue] ); const [value, setValue] = (0, import_react.useState)( readStorageValue(getInitialValueInEffect) ); const setStorageValue = (0, import_react.useCallback)( (valOrFunc) => { if ((0, import_utils.isFunction)(valOrFunc)) { setValue((current) => { const result = valOrFunc(current); window[type].setItem(key, serialize(result)); window.dispatchEvent( new CustomEvent(eventName, { detail: { key, value: valOrFunc(current) } }) ); return result; }); } else { window[type].setItem(key, serialize(valOrFunc)); window.dispatchEvent( new CustomEvent(eventName, { detail: { key, value: valOrFunc } }) ); setValue(valOrFunc); } }, [key, serialize] ); const removeStorageValue = (0, import_react.useCallback)(() => { window[type].removeItem(key); setValue(defaultValue); }, [defaultValue, key]); (0, import_use_window_event.useWindowEvent)("storage", (ev) => { var _a; if (ev.storageArea === window[type] && ev.key === key) setValue(deserialize((_a = ev.newValue) != null ? _a : void 0)); }); (0, import_use_window_event.useWindowEvent)(eventName, (ev) => { if (ev.detail.key === key) setValue(ev.detail.value); }); (0, import_react.useEffect)(() => { if (defaultValue !== void 0 && value === void 0) setStorageValue(defaultValue); }, [defaultValue, value, setStorageValue]); (0, import_react.useEffect)(() => { if (getInitialValueInEffect) setValue(readStorageValue()); }, [getInitialValueInEffect, readStorageValue]); return [ value === void 0 ? defaultValue : value, setStorageValue, removeStorageValue ]; }; }; var useLocalStorage = (props) => createStorage("localStorage", "use-local-storage")(props); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { createStorage, useLocalStorage }); //# sourceMappingURL=index.js.map