Controller: Component
React Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as React-Select, AntD and MUI. This wrapper component will make it easier for you to work with them.
Props
The following table contains information about the arguments for useController
.
Name | Type | Required | Description |
---|---|---|---|
name | FieldPath | ✓ | Unique name of your input. |
control | Control | control object is from invoking useForm . Optional when using FormProvider . | |
render | Function | This is a render prop. A function that returns a React element and provides the ability to attach events and value into the component. This simplifies integrating with external controlled components with non-standard prop names. Provides
| |
defaultValue | unknown | Important: Can not apply
| |
rules | Object | Validation rules in the same format for required, min, max, minLength, maxLength, pattern, validate
| |
shouldUnregister | boolean = false | Input will be unregistered after unmount and defaultValues will be removed as well. Note: this prop should be avoided when using with |
Return
The following table contains information about properties which Controller
produces.
Object Name | Name | Type | Description |
---|---|---|---|
field | onChange | (value: any) => void | A function which sends the input's value to the library. |
field | onBlur | () => void | A function which sends the input's onBlur event to the library. It should be assigned to the input's |
field | value | unknown | The current value of the controlled component. |
field | name | ||
Input's name being registered. | |||
field | ref | ||
A ref used to connect hook form to the input. Assign | |||
fieldState | invalid | boolean | Invalid state for current input. |
fieldState | isTouched | boolean | Touched state for current controlled input. |
fieldState | isDirty | boolean | Dirty state for current controlled input. |
fieldState | error | object | error for this specific input. |
formState | isDirty | boolean | Set to
|
formState | dirtyFields | object | An object with the user-modified fields. Make sure to provide all inputs' defaultValues via useForm, so the library can compare against the Dirty fields will not represent as |
formState | touchedFields | object | An object containing all the inputs the user has interacted with. |
formState | defaultValues | object | The value which has been set at useForm's defaultValues or updated defaultValues via reset API. |
isSubmitted | boolean | Set to true after the form is submitted. Will remain true until the reset method is invoked. | |
formState | isSubmitSuccessful | boolean | Indicate the form was successfully submitted without any |
formState | isSubmitting | boolean | true if the form is currently being submitted. false otherwise. |
formState | submitCount | number | Number of times the form was submitted. |
formState | isValid | boolean | Set to true if the form doesn't have any errors.
|
formState | isValidating | boolean | Set to true during validation. |
formState | errors | object | An object with field errors. There is also an ErrorMessage component to retrieve error message easily. |
Examples
import React from "react"; import ReactDatePicker from "react-datepicker"; import { TextField } from "@material-ui/core"; import { useForm, Controller } from "react-hook-form"; function App() { const { handleSubmit, control } = useForm(); return ( <form onSubmit={handleSubmit(data => console.log(data))}> <Controller control={control} name="ReactDatepicker" render={({ field: { onChange, onBlur, value, ref } }) => ( <ReactDatePicker onChange={onChange} onBlur={onBlur} selected={value} /> )} /> <input type="submit" /> </form> ); }
import ReactDatePicker from "react-datepicker"; import { TextField } from "@material-ui/core"; import { useForm, Controller } from "react-hook-form"; type FormValues = { ReactDatepicker: string; } function App() { const { handleSubmit, control } = useForm<FormValues>(); return ( <form onSubmit={handleSubmit(data => console.log(data))}> <Controller control={control} name="ReactDatepicker" render={({ field: { onChange, onBlur, value, ref } }) => ( <ReactDatePicker onChange={onChange} // send value to hook form onBlur={onBlur} // notify when input is touched/blur selected={value} /> )} /> <input type="submit" /> </form> ); }
Video
The following video showcases what's inside Controller and how its been built.
Tips
It's important to be aware of each prop's responsibility when working with external controlled components, such as MUI, AntD, Chakra UI. Controller acts as a "spy" on your input by reporting and setting value.
onChange: send data back to hook form
onBlur: report input has been interacted (focus and blur)
value: set up input initial and updated value
ref: allow input to be focused with error
name: give input an unique name
The following codesandbox demonstrate the usages:
Do not
register
input again. This component is made to take care of the registration process.<Controller name="test" render={({ field }) => { // return <input {...field} {...register('test')} />; ❌ double up the registration return <input {...field} />; // ✅ }} />
Customise what value gets sent to hook form by transforming the value during
onChange
.<Controller name="test" render={({ field }) => { // sending integer instead of string. return <input {...field} onChange={(e) => field.onChange(parseInt(e.target.value))} />; }} />
Thank you for your support
If you find React Hook Form to be useful in your project, please consider to star and support it.