useInputState

useInputState는 input 상태를 간편하게 관리할 수 있도록 도와주는 React 훅이에요. 기본적인 입력 상태 관리뿐만 아니라, 입력 값을 변환하는 기능도 제공해요.

Interface

function useInputState(initialValue: string, transformValue: (value: string) => string = echo): void;

Parameters

• initialValue (string): input 초기 값이에요. 기본값은 빈 문자열이에요.
• transformValue ((value: string) => string): 입력 값을 변환하는 함수예요.
  기본적으로 입력 값을 그대로 반환하지만, 필요에 따라 값을 변환할 수 있어요.

Returns

readonly [string, (value: string) => void] 형태의 튜플을 반환해요:

• string: 현재 상태 값이에요.
• (value: string) => void: 상태를 설정하는 함수예요.

Examples

Basic

import { useInputState } from 'reactive-kit';

function Example() {
  const [value, setValue] = useInputState('');

  return <input type="text" value={value} onChange={setValue} />;
}

Make uppercase value

import { useInputState } from 'reactive-kit';

function Example() {
  const [value, setValue] = useInputState('', v => v.toUpperCase());

  return <input type="text" value={value} onChange={setValue} />;
}