UNPKG

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