useController

Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.

@example

function Input(props) {
  const { field, fieldState, formState } = useController(props);
  return (
    <div>
      <input {...field} placeholder={props.name} />
      <p>{fieldState.isTouched && "Touched"}</p>
      <p>{formState.isSubmitted ? "submitted" : ""}</p>
    </div>
  );
}

function useController<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: UseControllerProps<TFieldValues, TName>): UseControllerReturn<TFieldValues, TName>;

useController<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: UseControllerProps<TFieldValues, TName>): UseControllerReturn<TFieldValues, TName>

[src]

§Type Parameters

TFieldValues extends FieldValues = FieldValues

[src]

TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>

[src]

§Parameters

props: UseControllerProps<TFieldValues, TName>

[src]

the path name to the form field value, and validation rules.

§Return Type

UseControllerReturn<TFieldValues, TName>

[src]

field properties, field and form state. UseControllerReturn