@modern-kit/react
Version:
1 lines • 4.33 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useInterval/useInterval.utils.ts","../../../src/hooks/useInterval/index.ts"],"sourcesContent":["import { isNumber } from '@modern-kit/utils';\nimport { type IntervalOptions } from './useInterval.types';\n\nexport const getIntervalOptions = (options: number | IntervalOptions) => {\n return isNumber(options)\n ? { delay: options, enabled: true }\n : {\n delay: options.delay,\n enabled: options?.enabled ?? true,\n };\n};\n","import { useCallback, useEffect, useRef } from 'react';\nimport { usePreservedCallback } from '../usePreservedCallback';\nimport { getIntervalOptions } from './useInterval.utils';\nimport {\n type UseIntervalReturnType,\n type IntervalOptions,\n} from './useInterval.types';\n\n/**\n * @description `useInterval` 훅은 지정된 시간 간격으로 특정 작업을 수행할 수 있게 해주는 훅입니다.\n *\n * @param {() => void} callback - 지정된 시간 간격마다 실행될 콜백 함수입니다.\n * @param {number | IntervalOptions} options - 시간 간격을 나타내는 밀리초 단위의 숫자 또는 설정 객체입니다.\n * 숫자일 경우 시간 간격으로 사용되며, 객체일 경우 `delay`와 `enabled` 속성을 설정할 수 있습니다.\n *\n * @returns {UseIntervalReturnType} `reset`, `set`, `clear`를 포함한 객체를 반환합니다.\n * - `set`: interval을 설정하는 함수입니다.\n * - `reset`: interval을 재설정하는 함수입니다.\n * - `clear`: interval을 초기화하는 함수입니다.\n *\n * @example\n * // 마운트 후 0.3초 간격으로 callback 실행\n * useInterval(callback, 300);\n *\n * // 마운트 후 0.3초 간격으로 callback 실행\n * useInterval(callback, { delay: 300 });\n *\n * // enabled true라면, 0.3초 간격으로 callback 함수 실행\n * useInterval(callback, { delay: 300, enabled: condition });\n *\n * @example\n * // 직접 interval을 핸들링 할 수 있는 함수 제공\n * const { set, reset, clear } = useInterval(callback, { delay: 300, enabled: condition });\n */\nexport function useInterval(\n callback: () => void,\n options: number\n): UseIntervalReturnType;\n\nexport function useInterval(\n callback: () => void,\n options: IntervalOptions\n): UseIntervalReturnType;\n\nexport function useInterval(\n callback: () => void,\n options: number | IntervalOptions\n): UseIntervalReturnType {\n const intervalRef = useRef<number | null>();\n\n const preservedCallback = usePreservedCallback(callback);\n\n const { delay, enabled } = getIntervalOptions(options);\n\n const set = useCallback(() => {\n intervalRef.current = window.setInterval(preservedCallback, delay);\n }, [preservedCallback, delay]);\n\n const clear = useCallback(() => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n }, []);\n\n const reset = useCallback(() => {\n clear();\n set();\n }, [clear, set]);\n\n useEffect(() => {\n if (delay < 0 || !enabled) return;\n\n set();\n return () => clear();\n }, [clear, set, enabled, delay]);\n\n return { set, reset, clear };\n}\n"],"names":[],"mappings":";;;;AAGO,MAAM,kBAAA,GAAqB,CAAC,OAAA,KAAsC;AACvE,EAAA,OAAO,QAAA,CAAS,OAAO,CAAA,GACnB,EAAE,OAAO,OAAA,EAAS,OAAA,EAAS,MAAK,GAChC;AAAA,IACE,OAAO,OAAA,CAAQ,KAAA;AAAA,IACf,OAAA,EAAS,SAAS,OAAA,IAAW;AAAA,GAC/B;AACN,CAAA;;ACkCO,SAAS,WAAA,CACd,UACA,OAAA,EACuB;AACvB,EAAA,MAAM,cAAc,MAAA,EAAsB;AAE1C,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,QAAQ,CAAA;AAEvD,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAQ,GAAI,mBAAmB,OAAO,CAAA;AAErD,EAAA,MAAM,GAAA,GAAM,YAAY,MAAM;AAC5B,IAAA,WAAA,CAAY,OAAA,GAAU,MAAA,CAAO,WAAA,CAAY,iBAAA,EAAmB,KAAK,CAAA;AAAA,EACnE,CAAA,EAAG,CAAC,iBAAA,EAAmB,KAAK,CAAC,CAAA;AAE7B,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,IAAI,YAAY,OAAA,EAAS;AACvB,MAAA,aAAA,CAAc,YAAY,OAAO,CAAA;AACjC,MAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,IACxB;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,KAAA,EAAM;AACN,IAAA,GAAA,EAAI;AAAA,EACN,CAAA,EAAG,CAAC,KAAA,EAAO,GAAG,CAAC,CAAA;AAEf,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAA,GAAQ,CAAA,IAAK,CAAC,OAAA,EAAS;AAE3B,IAAA,GAAA,EAAI;AACJ,IAAA,OAAO,MAAM,KAAA,EAAM;AAAA,EACrB,GAAG,CAAC,KAAA,EAAO,GAAA,EAAK,OAAA,EAAS,KAAK,CAAC,CAAA;AAE/B,EAAA,OAAO,EAAE,GAAA,EAAK,KAAA,EAAO,KAAA,EAAM;AAC7B;;;;"}