@modern-kit/react
Version:
1 lines • 9.49 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useLocalStorage/useLocalStorage.utils.ts","../../../src/hooks/useLocalStorage/index.ts"],"sourcesContent":["const CUSTOM_EVENT_KEYS = 'modern-kit-local-storage';\n\nexport const localStorageEventHandler = {\n key: CUSTOM_EVENT_KEYS,\n subscribe: (callback: () => void) => {\n window.addEventListener(CUSTOM_EVENT_KEYS, callback);\n },\n unsubscribe: (callback: () => void) => {\n window.removeEventListener(CUSTOM_EVENT_KEYS, callback);\n },\n dispatchEvent: () => {\n window.dispatchEvent(new StorageEvent(CUSTOM_EVENT_KEYS));\n },\n};\n\nexport const getSnapshot = (key: string) => {\n return window.localStorage.getItem(key);\n};\n\n// SSR 환경에서 initialValue를 반환\nexport const getServerSnapshot = <T>(initialValue: T | null) => {\n return JSON.stringify(initialValue);\n};\n\nexport const subscribe = (callback: () => void) => {\n localStorageEventHandler.subscribe(callback);\n return () => {\n localStorageEventHandler.unsubscribe(callback);\n };\n};\n","import { isFunction, parseJSON } from '@modern-kit/utils';\nimport {\n Dispatch,\n SetStateAction,\n useCallback,\n useMemo,\n useSyncExternalStore,\n} from 'react';\nimport {\n getServerSnapshot,\n getSnapshot,\n localStorageEventHandler,\n subscribe,\n} from './useLocalStorage.utils';\nimport { useVisibilityChange } from '../useVisibilityChange';\n\ninterface UseLocalStorageWithoutInitialValueProps {\n key: string;\n visibilityChange?: boolean;\n}\n\ninterface UseLocalStorageWithInitialValueProps<T> {\n key: string;\n initialValue: T | (() => T);\n visibilityChange?: boolean;\n}\n\ntype UseLocalStorageProps<T> =\n | UseLocalStorageWithoutInitialValueProps\n | UseLocalStorageWithInitialValueProps<T>;\n\n/**\n * @description `useLocalStorage` 훅은 지정된 `key`를 사용하여 `localStorage`에 데이터를 저장하고 불러오는 기능을 제공합니다.\n *\n * @template T - `state`의 데이터 타입입니다.\n *\n * @param {UseLocalStorageWithInitialValueProps<T>} props - initialValue를 포함한 useLocalStorage 훅의 속성입니다.\n * @param {string} props.key - `localStorage`에서 데이터를 저장하고 가져올 때 사용하는 키입니다. 필수 속성입니다.\n * @param {T | (() => T)} props.initialValue - `state`의 초기 값을 설정합니다. 함수로 전달할 경우 함수의 반환값이 초기 값으로 사용됩니다.\n * @param {boolean} [props.visibilityChange=false] - 브라우저 탭의 가시성 변경 이벤트를 감지하여 가시성 상태가 되면 `state`를 동기화합니다. 사용 케이스로 `sessionStorage`와 다르게 탭 간 공유되는 저장소이기 때문에 탭 간 동기화가 필요할 때 사용합니다.\n *\n * @returns {{\n * state: T;\n * setState: Dispatch<SetStateAction<T>>;\n * removeState: () => void;\n * }}\n * - `state`: 현재 `localStorage`에 저장된 값입니다. 값이 없을 경우 initialValue로 초기화됩니다.\n * - `setState`: `localStorage`에 저장된 값을 업데이트합니다. 새로운 값 또는 이전 상태를 인자로 받는 함수를 전달할 수 있습니다.\n * - `removeState`: `localStorage`에서 해당 `key`의 값을 삭제합니다.\n *\n * @example\n * const { state, setState, removeState } = useLocalStorage<string>({\n * key: 'username',\n * initialValue: 'Guest',\n * });\n *\n * state; // string\n */\nexport function useLocalStorage<T>({\n key,\n initialValue,\n visibilityChange,\n}: UseLocalStorageWithInitialValueProps<T>): {\n state: T;\n setState: Dispatch<SetStateAction<T>>;\n removeState: () => void;\n};\n\n/**\n * @description `useLocalStorage` 훅은 지정된 `key`를 사용하여 `localStorage`에 데이터를 저장하고 불러오는 기능을 제공합니다.\n *\n * @template T - `state`의 데이터 타입입니다.\n *\n * @param {UseLocalStorageWithoutInitialValueProps} props - initialValue가 없는 useLocalStorage 훅의 속성입니다.\n * @param {string} props.key - `localStorage`에서 데이터를 저장하고 가져올 때 사용하는 키입니다. 필수 속성입니다.\n * @param {boolean} [props.visibilityChange=false] - 브라우저 탭의 가시성 변경 이벤트를 감지하여 가시성 상태가 되면 `state`를 동기화합니다.\n * 사용 케이스로 `sessionStorage`와 다르게 탭 간 공유되는 저장소이기 때문에 탭 간 동기화가 필요할 때 사용합니다.\n *\n * @returns {{\n * state: T | null;\n * setState: Dispatch<SetStateAction<T | null>>;\n * removeState: () => void;\n * }}\n * - `state`: 현재 `localStorage`에 저장된 값입니다. 값이 없을 경우 `null`을 반환합니다.\n * - `setState`: `localStorage`에 저장된 값을 업데이트합니다. 새로운 값 또는 이전 상태를 인자로 받는 함수를 전달할 수 있습니다.\n * - `removeState`: `localStorage`에서 해당 `key`의 값을 삭제합니다.\n *\n * @example\n * const { state, setState, removeState } = useLocalStorage<string>({\n * key: 'username',\n * });\n *\n * state; // string | null\n */\nexport function useLocalStorage<T = unknown>({\n key,\n visibilityChange,\n}: UseLocalStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch<SetStateAction<T | null>>;\n removeState: () => void;\n};\nexport function useLocalStorage<T>(props: UseLocalStorageProps<T>) {\n const { key, visibilityChange = false } = props;\n const initialValue = 'initialValue' in props ? props.initialValue : null;\n\n const initialValueToUse = isFunction(initialValue)\n ? initialValue()\n : initialValue;\n\n const externalStoreState = useSyncExternalStore(\n subscribe,\n () => getSnapshot(key),\n () => getServerSnapshot(initialValueToUse)\n );\n\n const state = useMemo(() => {\n return externalStoreState\n ? parseJSON<T>(externalStoreState)\n : initialValueToUse;\n }, [externalStoreState, initialValueToUse]);\n\n const setState = useCallback(\n (value: SetStateAction<T | null>) => {\n try {\n const prevStateString = getSnapshot(key);\n const prevState = prevStateString\n ? parseJSON<T>(prevStateString)\n : initialValueToUse;\n const valueToUse = isFunction(value) ? value(prevState) : value;\n\n window.localStorage.setItem(key, JSON.stringify(valueToUse));\n localStorageEventHandler.dispatchEvent();\n } catch (err) {\n throw new Error(\n `로컬 스토리지 \"${key}\" key에 데이터를 저장하는데 실패했습니다: ${err}`\n );\n }\n },\n [key, initialValueToUse]\n );\n\n const removeState = useCallback(() => {\n try {\n window.localStorage.removeItem(key);\n localStorageEventHandler.dispatchEvent();\n } catch (err) {\n throw new Error(\n `로컬 스토리지 \"${key}\" key의 데이터를 삭제하는데 실패했습니다: ${err}`\n );\n }\n }, [key]);\n\n useVisibilityChange({\n onShow: () => localStorageEventHandler.dispatchEvent(),\n enabled: visibilityChange,\n });\n\n return { state, setState, removeState };\n}\n"],"names":[],"mappings":"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"}