@modern-kit/react/dist/hooks/useSessionStorage/index.mjs

modern-kit/react

import { parseJSON, StorageManager, isFunction } from '@modern-kit/utils';
import { useMemo, useSyncExternalStore, useCallback } from 'react';

const CUSTOM_EVENT_KEYS = "modern-kit-session-storage";
const sessionStorageEventHandler = {
  key: CUSTOM_EVENT_KEYS,
  subscribe: (callback) => {
    window.addEventListener(CUSTOM_EVENT_KEYS, callback);
  },
  unsubscribe: (callback) => {
    window.removeEventListener(CUSTOM_EVENT_KEYS, callback);
  },
  dispatchEvent: () => {
    window.dispatchEvent(new StorageEvent(CUSTOM_EVENT_KEYS));
  }
};
const getSnapshot = (key) => {
  try {
    return window.sessionStorage.getItem(key);
  } catch {
    return null;
  }
};
const getServerSnapshot = (initialValue) => {
  return JSON.stringify(initialValue);
};
const subscribe = (callback) => {
  sessionStorageEventHandler.subscribe(callback);
  return () => {
    sessionStorageEventHandler.unsubscribe(callback);
  };
};
const getParsedState = (state, fallbackValue) => {
  if (state == null) {
    return fallbackValue;
  }
  return parseJSON(state);
};

const storageManager = new StorageManager("sessionStorage");
function useSessionStorage(options) {
  const { key } = options;
  const initialValue = "initialValue" in options ? options.initialValue : null;
  const initialValueToUse = useMemo(() => {
    return isFunction(initialValue) ? initialValue() : initialValue;
  }, [initialValue]);
  const externalStoreState = useSyncExternalStore(
    subscribe,
    () => getSnapshot(key),
    () => getServerSnapshot(initialValueToUse)
  );
  const state = useMemo(() => {
    return getParsedState(externalStoreState, initialValueToUse);
  }, [externalStoreState, initialValueToUse]);
  const setState = useCallback(
    (value) => {
      try {
        const prevStateString = getSnapshot(key);
        const prevState = getParsedState(prevStateString, initialValueToUse);
        const valueToUse = isFunction(value) ? value(prevState) : value;
        storageManager.setItem(key, valueToUse);
        sessionStorageEventHandler.dispatchEvent();
      } catch (err) {
        throw new Error(
          `\uC138\uC158 \uC2A4\uD1A0\uB9AC\uC9C0 "${key}" key\uC5D0 \uB370\uC774\uD130\uB97C \uC800\uC7A5\uD558\uB294\uB370 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4: ${err}`
        );
      }
    },
    [key, initialValueToUse]
  );
  const removeState = useCallback(() => {
    try {
      storageManager.removeItem(key);
      sessionStorageEventHandler.dispatchEvent();
    } catch (err) {
      throw new Error(
        `\uC138\uC158 \uC2A4\uD1A0\uB9AC\uC9C0 "${key}" key\uC758 \uB370\uC774\uD130\uB97C \uC0AD\uC81C\uD558\uB294\uB370 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4: ${err}`
      );
    }
  }, [key]);
  return { state, setState, removeState };
}

export { useSessionStorage };
//# sourceMappingURL=index.mjs.map