UNPKG

react-hook-form

Version:

Performant, flexible and extensible forms library for React Hooks

47 lines 1.75 kB
/// <reference types="react" /> import { ControllerProps, FieldPath, FieldValues } from './types'; /** * Component based on `useController` hook to work with controlled component. * * @remarks * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA) * * @param props - the path name to the form field value, and validation rules. * * @returns provide field handler functions, field and form state. * * @example * ```tsx * function App() { * const { control } = useForm<FormValues>({ * defaultValues: { * test: "" * } * }); * * return ( * <form> * <Controller * control={control} * name="test" * render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => ( * <> * <input * onChange={onChange} // send value to hook form * onBlur={onBlur} // notify when input is touched * value={value} // return updated value * ref={ref} // set ref for focus management * /> * <p>{formState.isSubmitted ? "submitted" : ""}</p> * <p>{fieldState.isTouched ? "touched" : ""}</p> * </> * )} * /> * </form> * ); * } * ``` */ declare const Controller: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>; export { Controller }; //# sourceMappingURL=controller.d.ts.map