controller.d.ts 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. /// <reference types="react" />
  2. import { 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. */
  45. 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>>;
  46. export { Controller };
  47. //# sourceMappingURL=controller.d.ts.map