react-hook-form
Version:
Performant, flexible and extensible forms library for React Hooks
60 lines • 2.36 kB
TypeScript
import React from 'react';
import { RegisterOptions } from './validator';
import { Control, FieldError, FieldPath, FieldPathValue, FieldValues, Noop, RefCallBack, UseFormStateReturn } from './';
export type ControllerFieldState = {
invalid: boolean;
isTouched: boolean;
isDirty: boolean;
isValidating: boolean;
error?: FieldError;
};
export type ControllerRenderProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
onChange: (...event: any[]) => void;
onBlur: Noop;
value: FieldPathValue<TFieldValues, TName>;
disabled?: boolean;
name: TName;
ref: RefCallBack;
};
export type UseControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
name: TName;
rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
shouldUnregister?: boolean;
defaultValue?: FieldPathValue<TFieldValues, TName>;
control?: Control<TFieldValues>;
disabled?: boolean;
};
export type UseControllerReturn<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
field: ControllerRenderProps<TFieldValues, TName>;
formState: UseFormStateReturn<TFieldValues>;
fieldState: ControllerFieldState;
};
/**
* Render function to provide the control for the field.
*
* @returns all the event handler, and relevant field and form state.
*
* @example
* ```tsx
* const { field, fieldState, formState } = useController();
*
* <Controller
* render={({ field, formState, fieldState }) => ({
* <input
* onChange={field.onChange}
* onBlur={field.onBlur}
* name={field.name}
* ref={field.ref} // optional for focus management
* />
* })}
* />
* ```
*/
export type ControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
render: ({ field, fieldState, formState, }: {
field: ControllerRenderProps<TFieldValues, TName>;
fieldState: ControllerFieldState;
formState: UseFormStateReturn<TFieldValues>;
}) => React.ReactElement;
} & UseControllerProps<TFieldValues, TName>;
//# sourceMappingURL=controller.d.ts.map