use-uncontrolled

use-uncontrolled

제어(controlled) 및 비제어(uncontrolled) 컴포넌트의 상태를 모두 관리할 수 있게 해 주는 훅이에요.

출처: 문서

본문

사용법 (Usage)

use-uncontrolled 훅은 제어 및 비제어 컴포넌트의 상태를 모두 관리해요:

import { useUncontrolled } from '@mantine/hooks';

interface CustomInputProps {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}

function CustomInput({
  value,
  defaultValue,
  onChange,
}: CustomInputProps) {
  const [_value, handleChange] = useUncontrolled({
    value,
    defaultValue,
    finalValue: 'Final',
    onChange,
  });

  return (
     handleChange(event.currentTarget.value)}
    />
  );
}

값 타입 설정 (Set value type)

기본적으로 훅이 타입을 자동으로 설정하지만, 직접 타입을 제공할 수도 있어요:

import { useUncontrolled } from '@mantine/hooks';

function Demo() {
  const [_value, handleChange] = useUncontrolled({
    value: 10,
    defaultValue: 5,
    finalValue: 20,
    onChange: (val) => console.log(val > 10),
  });
}

정의 (Definition)

interface UseUncontrolledOptions<T> {
  /** Value for controlled state */
  value?: T;

  /** Initial value for uncontrolled state */
  defaultValue?: T;

  /** Final value for uncontrolled state when value and defaultValue are not provided */
  finalValue?: T;

  /** Controlled state onChange handler */
  onChange?: (value: T, ...payload: any[]) => void;
}

type UseUncontrolledReturnValue<T> = [
  /** Current value */
  T,

  /** Handler to update the state, passes `value` and `payload` to `onChange` */
  (value: T, ...payload: any[]) => void,

  /** True if the state is controlled; false if uncontrolled */
  boolean,
];

function useUncontrolled<T>(input: UseUncontrolledOptions<T>): UseUncontrolledReturnValue<T>;

내보내는 타입 (Exported types)

UseUncontrolledOptions와 UseUncontrolledReturnValue 타입은 @mantine/hooks에서 내보내져요:

import type { UseUncontrolledOptions, UseUncontrolledReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)

• use-toggle
• use-validated-state