UNPKG

1.71 kBTypeScriptView Raw
1import { ControllerProps, FieldPath, FieldValues } from './types';
2/**
3 * Component based on `useController` hook to work with controlled component.
4 *
5 * @remarks
6 * [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)
7 *
8 * @param props - the path name to the form field value, and validation rules.
9 *
10 * @returns provide field handler functions, field and form state.
11 *
12 * @example
13 * ```tsx
14 * function App() {
15 * const { control } = useForm<FormValues>({
16 * defaultValues: {
17 * test: ""
18 * }
19 * });
20 *
21 * return (
22 * <form>
23 * <Controller
24 * control={control}
25 * name="test"
26 * render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
27 * <>
28 * <input
29 * onChange={onChange} // send value to hook form
30 * onBlur={onBlur} // notify when input is touched
31 * value={value} // return updated value
32 * ref={ref} // set ref for focus management
33 * />
34 * <p>{formState.isSubmitted ? "submitted" : ""}</p>
35 * <p>{fieldState.isTouched ? "touched" : ""}</p>
36 * </>
37 * )}
38 * />
39 * </form>
40 * );
41 * }
42 * ```
43 */
44declare 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>>;
45export { Controller };
46//# sourceMappingURL=controller.d.ts.map
\No newline at end of file