@modern-kit/react
Version:
1 lines • 4.29 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useTimeout/useTimeout.utils.ts","../../../src/hooks/useTimeout/index.ts"],"sourcesContent":["import { isNumber } from '@modern-kit/utils';\n\nexport interface TimeoutOptions {\n delay: number;\n enabled?: boolean;\n}\n\nexport const getTimeoutOptions = (options: number | TimeoutOptions) => {\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 { getTimeoutOptions, TimeoutOptions } from './useTimeout.utils';\n\ninterface UseTimeoutReturnType {\n set: () => void;\n clear: () => void;\n reset: () => void;\n}\n\n/**\n * @description `useTimeout`훅은 지정된 지연 시간 후에 콜백 함수를 호출하는 커스텀 훅입니다.\n *\n * @param {() => void} callback - delay 후에 실행될 함수입니다.\n * @param {number | TimeoutOptions} options - 밀리초(ms) 단위의 지연 시간 또는 옵션 객체입니다.\n * 숫자일 경우 시간 간격으로 사용되며, 객체일 경우 `delay`와 `enabled` 속성을 설정할 수 있습니다.\n *\n * @return {UseTimeoutReturnType} set, reset, clear 함수를 포함하는 객체를 반환합니다.\n * - set: timeout을 설정하는 함수입니다.\n * - reset: timeout을 재설정하는 함수입니다.\n * - clear: timeout을 초기화하는 함수입니다.\n *\n * @example\n * // 마운트 후 0.3초 후 callback 함수 실행\n * useTimeout(callback, 300);\n *\n * // 마운트 후 0.3초 후 callback 함수 실행\n * useTimeout(callback, { delay: 300 });\n *\n * // enabled가 true라면, 0.3초 후 callback 함수 실행\n * useTimeout(callback, { delay: 300, enabled: condition });\n *\n * @example\n * // 직접 timeout 핸들링 할 수 있는 함수 제공\n * const { set, reset, clear } = useTimeout(callback, { delay: 300, enabled: condition });\n */\nexport function useTimeout(\n callback: () => void,\n options: number\n): UseTimeoutReturnType;\n\nexport function useTimeout(\n callback: () => void,\n options: TimeoutOptions\n): UseTimeoutReturnType;\n\nexport function useTimeout(\n callback: () => void,\n options: number | TimeoutOptions\n): UseTimeoutReturnType {\n const timeoutRef = useRef<number | null>();\n\n const callbackAction = usePreservedCallback(callback);\n\n const { delay, enabled } = getTimeoutOptions(options);\n\n const set = useCallback(() => {\n timeoutRef.current = window.setTimeout(callbackAction, delay);\n }, [callbackAction, delay]);\n\n const clear = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n }, []);\n\n const reset = useCallback(() => {\n clear();\n set();\n }, [clear, set]);\n\n useEffect(() => {\n if (!enabled) return;\n\n set();\n return () => clear();\n }, [set, clear, enabled]);\n\n return { set, reset, clear };\n}\n"],"names":["isNumber","useRef","usePreservedCallback","useCallback","useEffect"],"mappings":";;;;;;AAOO,MAAM,iBAAA,GAAoB,CAAC,OAAA,KAAqC;AACrE,EAAA,OAAOA,cAAA,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;;ACgCO,SAAS,UAAA,CACd,UACA,OAAA,EACsB;AACtB,EAAA,MAAM,aAAaC,YAAA,EAAsB;AAEzC,EAAA,MAAM,cAAA,GAAiBC,+CAAqB,QAAQ,CAAA;AAEpD,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAQ,GAAI,kBAAkB,OAAO,CAAA;AAEpD,EAAA,MAAM,GAAA,GAAMC,kBAAY,MAAM;AAC5B,IAAA,UAAA,CAAW,OAAA,GAAU,MAAA,CAAO,UAAA,CAAW,cAAA,EAAgB,KAAK,CAAA;AAAA,EAC9D,CAAA,EAAG,CAAC,cAAA,EAAgB,KAAK,CAAC,CAAA;AAE1B,EAAA,MAAM,KAAA,GAAQA,kBAAY,MAAM;AAC9B,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQA,kBAAY,MAAM;AAC9B,IAAA,KAAA,EAAM;AACN,IAAA,GAAA,EAAI;AAAA,EACN,CAAA,EAAG,CAAC,KAAA,EAAO,GAAG,CAAC,CAAA;AAEf,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,GAAA,EAAI;AACJ,IAAA,OAAO,MAAM,KAAA,EAAM;AAAA,EACrB,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,OAAO,CAAC,CAAA;AAExB,EAAA,OAAO,EAAE,GAAA,EAAK,KAAA,EAAO,KAAA,EAAM;AAC7B;;;;"}