@modern-kit/react
Version:
1 lines • 3.73 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useDebouncedInputValue/index.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useDebouncedState } from '../useDebouncedState';\nimport { useDebounce } from '../useDebounce';\n\ntype DebounceParameters = Parameters<typeof useDebounce>;\n\ninterface UseDebouncedInputValueReturnType {\n value: string;\n debouncedValue: string;\n onChange: (value: string) => void;\n onReset: () => void;\n onClear: () => void;\n}\n\n/**\n * @description `input value`를 관리하고, 디바운스(지연)을 적용하는 커스텀 React 훅입니다\n *\n * 현재 입력 값과 디바운싱된 값을 제공하며, 값을 업데이트하고 리셋할 수 있는 함수도 함께 제공합니다.\n *\n * @param {string} initialValue - 초기 입력 값입니다.\n * @param {DebounceParameters[1]} wait - 입력 값에 디바운싱을 적용할 때의 지연 시간(밀리초)입니다.\n * @param {DebounceParameters[2]} options - 디바운스 동작과 관련된 옵션 객체입니다.\n * @param {AbortSignal} options.signal - 디바운스된 함수를 취소하기 위한 선택적 AbortSignal입니다.\n * @param {number} options.maxWait - 최대 대기 시간(밀리초)입니다.\n * @param {boolean} options.leading - 첫 번째 호출을 실행할지 여부입니다.\n * @param {boolean} options.trailing - 마지막 호출을 실행할지 여부입니다.\n *\n * @returns {UseDebouncedInputValueReturnType}\n * - `value`: 현재 입력 값\n * - `debouncedValue`: 디바운싱된 입력 값\n * - `onChange`: 입력 값을 업데이트하는 함수\n * - `onReset`: 두 값을 초기값(initialValue)으로 초기화하는 함수\n * - `onClear`: 두 값을 빈 문자열('')로 초기화하는 함수\n *\n * @example\n * const { value, debouncedValue, onChange, onReset, onClear } = useDebouncedInputValue(300);\n *\n * onChange('test');\n *\n * value; // 곧바로 변경\n * debouncedValue; // 300ms 이후에 변경\n */\nexport function useDebouncedInputValue(\n initialValue: string,\n wait: DebounceParameters[1],\n options: DebounceParameters[2] = {}\n): UseDebouncedInputValueReturnType {\n const [value, setValue] = useState(initialValue);\n const [debouncedValue, setDebouncedValue] = useDebouncedState(\n initialValue,\n wait,\n options\n );\n\n const onChange = useCallback(\n (value: string) => {\n setValue(value);\n setDebouncedValue(value);\n },\n [setDebouncedValue]\n );\n\n const onReset = useCallback(() => {\n setValue(initialValue);\n setDebouncedValue(initialValue);\n }, [setDebouncedValue, initialValue]);\n\n const onClear = useCallback(() => {\n setValue('');\n setDebouncedValue('');\n }, [setDebouncedValue]);\n\n return { value, debouncedValue, onChange, onReset, onClear };\n}\n"],"names":["useState","useDebouncedState","useCallback","value"],"mappings":";;;;;;;;;AA0CO,SAAS,sBAAA,CACd,YAAA,EACA,IAAA,EACA,OAAA,GAAiC,EAAC,EACA;AAClC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,YAAY,CAAA;AAC/C,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIC,wCAAA;AAAA,IAC1C,YAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,QAAA,GAAWC,iBAAA;AAAA,IACf,CAACC,MAAAA,KAAkB;AACjB,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAA,iBAAA,CAAkBA,MAAK,CAAA;AAAA,IACzB,CAAA;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,MAAM,OAAA,GAAUD,kBAAY,MAAM;AAChC,IAAA,QAAA,CAAS,YAAY,CAAA;AACrB,IAAA,iBAAA,CAAkB,YAAY,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,iBAAA,EAAmB,YAAY,CAAC,CAAA;AAEpC,EAAA,MAAM,OAAA,GAAUA,kBAAY,MAAM;AAChC,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,iBAAA,CAAkB,EAAE,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,OAAO,EAAE,KAAA,EAAO,cAAA,EAAgB,QAAA,EAAU,SAAS,OAAA,EAAQ;AAC7D;;;;"}