@modern-kit/react/dist/hooks/useInputState/index.d.ts

modern-kit/react

import { ChangeEvent } from 'react';

/**
 * @description 입력 필드의 상태를 관리하는 커스텀 훅(초기값 존재)
 *
 * 단일 입력 필드와 다중 입력 필드를 지원합니다.
 * - 다중 입력 필드는 객체 형태로 입력 필드의 `name` 속성을 `key`로 사용합니다.
 *
 * @template T - 입력값의 타입
 * @param {T} initialValue - 초기값
 * @returns {{
 *  value: T;
 *  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 *  reset: () => void;
 * }} 입력 상태와 관련된 객체
 * - `value`: 현재 입력값
 * - `onChange`: 입력값 변경 핸들러
 * - `reset`: 입력값을 초기값으로 재설정하는 함수
 *
 * @example
 * ```tsx
 * const { value, onChange, reset } = useInputState('');
 * // const value: string
 *
 * <input type="text" name="test" onChange={onChange} value={value} />
 * ```
 *
 * @example
 * ```tsx
 * const { value, onChange, reset } = useInputState({ test: '' });
 * // const value: { test: string }
 *
 * // name 속성 필수
 * <input type="text" name="test" onChange={onChange} value={value.test} />
 * ```
 */
declare function useInputState<T>(initialValue: T): {
    value: T;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    reset: () => void;
};
/**
 * @description 입력 필드의 상태를 관리하는 커스텀 훅(초기값 없음)
 *
 * 단일 입력 필드와 다중 입력 필드를 지원합니다.
 * - 다중 입력 필드는 객체 형태로 입력 필드의 `name` 속성을 `key`로 사용합니다.
 *
 * @template T - 입력값의 타입
 * @returns {{
 *  value: T | undefined;
 *  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 *  reset: () => void;
 * }} 입력 상태와 관련된 객체
 * - `value`: 현재 입력값
 * - `onChange`: 입력값 변경 핸들러
 * - `reset`: 입력값을 초기값으로 재설정하는 함수
 *
 * @example
 * ```tsx
 * const { value, onChange, reset } = useInputState<string>();
 * // const value: string | undefined
 *
 * <input type="text" name="test" onChange={onChange} value={value} />
 * ```
 *
 * @example
 * ```tsx
 * const { value, onChange, reset } = useInputState<{ test: string }>();
 * // const value: { test: string } | undefined
 *
 * // name 속성 필수
 * <input type="text" name="test" onChange={onChange} value={value?.test || ''} />
 * ```
 */
declare function useInputState<T>(): {
    value: T | undefined;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    reset: () => void;
};

export { useInputState };