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

modern-kit/react

import { isFunction, parseJSON } from '@modern-kit/utils';
import { useSyncExternalStore, useMemo, useCallback } from 'react';
import { useVisibilityChange } from '../useVisibilityChange/index.mjs';
import '../useEventListener/index.mjs';
import '../usePreservedCallback/index.mjs';
import '../useIsomorphicLayoutEffect/index.mjs';

const CUSTOM_EVENT_KEYS = "modern-kit-local-storage";
const localStorageEventHandler = {
  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) => {
  return window.localStorage.getItem(key);
};
const getServerSnapshot = (initialValue) => {
  return JSON.stringify(initialValue);
};
const subscribe = (callback) => {
  localStorageEventHandler.subscribe(callback);
  return () => {
    localStorageEventHandler.unsubscribe(callback);
  };
};

function useLocalStorage(props) {
  const { key, visibilityChange = false } = props;
  const initialValue = "initialValue" in props ? props.initialValue : null;
  const initialValueToUse = isFunction(initialValue) ? initialValue() : initialValue;
  const externalStoreState = useSyncExternalStore(
    subscribe,
    () => getSnapshot(key),
    () => getServerSnapshot(initialValueToUse)
  );
  const state = useMemo(() => {
    return externalStoreState ? parseJSON(externalStoreState) : initialValueToUse;
  }, [externalStoreState, initialValueToUse]);
  const setState = useCallback(
    (value) => {
      try {
        const prevStateString = getSnapshot(key);
        const prevState = prevStateString ? parseJSON(prevStateString) : initialValueToUse;
        const valueToUse = isFunction(value) ? value(prevState) : value;
        window.localStorage.setItem(key, JSON.stringify(valueToUse));
        localStorageEventHandler.dispatchEvent();
      } catch (err) {
        throw new Error(
          `\uB85C\uCEEC \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 {
      window.localStorage.removeItem(key);
      localStorageEventHandler.dispatchEvent();
    } catch (err) {
      throw new Error(
        `\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 "${key}" key\uC758 \uB370\uC774\uD130\uB97C \uC0AD\uC81C\uD558\uB294\uB370 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4: ${err}`
      );
    }
  }, [key]);
  useVisibilityChange({
    onShow: () => localStorageEventHandler.dispatchEvent(),
    enabled: visibilityChange
  });
  return { state, setState, removeState };
}

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