useInputState

input 필드의 상태를 관리하는 커스텀 훅 입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface UseInputStateOptions {
  validate?: (value: string) => string | null | undefined;
}

interface UseInputStateReturn {
  value: string;
  error: string | null;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
  resetError: () => void;
  resetValue: () => void;
  reset: () => void;
}

function useInputState(
  initialValue?: string,
  options?: UseInputStateOptions
): UseInputStateReturn;

Usage

typescript

import { useInputState } from '@modern-kit/react';

const Example = () => {
  const { value, error, onChange, reset } = useInputState('', {
    validate: (value) => value.length > 10 ? 'value는 10자 이상이면 안됩니다.' : undefined
  });

  return (
    <>
      <h1>{value}</h1>
      <p>{error}</p>
      <input type="text" name="test" onChange={onChange} value={value} />
      <button onClick={reset}>reset</button>
    </>
  );
};

Example

test:

error: