React hook form typescript example

Typescript Support

Important: Typescript ^4.3 above is the recommended version to work with react hook form.

Resolver

import React from "react" 
 
import  useForm, Resolver > from "react-hook-form" 
 
type FormValues =  
 firstName: string 
 lastName: string 
 
> 
 
const resolver: ResolverFormValues> = async (values) =>  
 
return  
 values: values.firstName ? values : >, 
 errors: !values.firstName
 
?  
 firstName:  
 type: "required", 
 message: "This is required.", 
 
>, 
 
> 
 
: >, 
 
> 
 
> 
 
export default function App()  
 
const  
 register, 
 handleSubmit, 
 formState:  errors >, 
 
> = useFormFormValues>( resolver >) 
 
const onSubmit = handleSubmit((data) => console.log(data)) 
 
return ( 
 
form onSubmit=onSubmit>> 
 
input . register("firstName")> placeholder="Bill" /> 
 
errors?.firstName && p>errors.firstName.message>/p>> 
 
input . register("lastName")> placeholder="Luo" /> 
 
input type="submit" /> 
 
/form> 
 
) 
 
>

SubmitHandler

import React from "react" 
 
import  useForm, SubmitHandler > from "react-hook-form" 
 
type FormValues =  
 firstName: string 
 lastName: string 
 email: string 
 
> 
 
export default function App()  
 
const  register, handleSubmit > = useFormFormValues>() 
 
const onSubmit: SubmitHandlerFormValues> = (data) => console.log(data) 
 
return ( 
 
form onSubmit=handleSubmit(onSubmit)>> 
 
input . register("firstName")> /> 
 
input . register("lastName")> /> 
 
input type="email" . register("email")> /> 
 
input type="submit" /> 
 
/form> 
 
) 
 
>

Control

import  useForm, useWatch, Control > from "react-hook-form" 
 
type FormValues =  
 firstName: string 
 lastName: string 
 
> 
 
function IsolateReRender( control >:  control: ControlFormValues> >)  
 
const firstName = useWatch( 
 control, 
 name: "firstName", 
 defaultValue: "default", 
 
>) 
 
return div>firstName>/div> 
 
> 
 
export default function App()  
 
const  register, control, handleSubmit > = useFormFormValues>() 
 
const onSubmit = handleSubmit((data) => console.log(data)) 
 
return ( 
 
form onSubmit=onSubmit>> 
 
input . register("firstName")> /> 
 
input . register("lastName")> /> 
 
IsolateReRender control=control> /> 
 
input type="submit" /> 
 
/form> 
 
) 
 
>

UseFormReturn

export type UseFormReturn 
 TFieldValues extends FieldValues = FieldValues, 
 TContext = any 
 
> =  
 watch: UseFormWatchTFieldValues> 
 getValues: UseFormGetValuesTFieldValues> 
 getFieldState: UseFormGetFieldStateTFieldValues> 
 setError: UseFormSetErrorTFieldValues> 
 clearErrors: UseFormClearErrorsTFieldValues> 
 setValue: UseFormSetValueTFieldValues> 
 trigger: UseFormTriggerTFieldValues> 
 formState: FormStateTFieldValues> 
 resetField: UseFormResetFieldTFieldValues> 
 reset: UseFormResetTFieldValues> 
 handleSubmit: UseFormHandleSubmitTFieldValues> 
 unregister: UseFormUnregisterTFieldValues> 
 control: ControlTFieldValues, TContext> 
 register: UseFormRegisterTFieldValues> 
 setFocus: UseFormSetFocusTFieldValues> 
 
>

import type  FieldValues, UseFormReturn, SubmitHandler > from "react-hook-form" 
 
import React from "react" 
 
import  useForm > from "react-hook-form" 
 
type InputProps = React.DetailedHTMLProps 
 React.InputHTMLAttributesHTMLInputElement>, 
 HTMLInputElement
 
> 
 
const Input = React.forwardRefHTMLInputElement, InputProps>((props, ref) => ( 
 
input ref=ref> . props> /> 
 
)) 
 
type Option =  
 label: React.ReactNode
 value: string | number | string[] 
 
> 
 
type SelectProps = React.DetailedHTMLProps 
 React.SelectHTMLAttributesHTMLSelectElement>, 
 HTMLSelectElement
 
> &  options: Option[] > 
 
const Select = React.forwardRefHTMLSelectElement, SelectProps>( 
 
( options, . props >, ref) => ( 
 
select ref=ref> . props>> 
 
options.map(( label, value >) => ( 
 
option value=value>>label>/option> 
 
))> 
 
/select> 
 
) 
 
) 
 
type FormPropsTFormValues extends FieldValues> =  
 onSubmit: SubmitHandlerTFormValues> 
 
children: (methods: UseFormReturnTFormValues>) => React.ReactNode
 
> 
 
const Form = TFormValues extends FieldValues>( 
 onSubmit, 
 children, 
 
>: FormPropsTFormValues>) =>  
 
const methods = useFormTFormValues>() 
 
return ( 
 
form onSubmit=methods.handleSubmit(onSubmit)>>children(methods)>/form> 
 
) 
 
> 
 
type FormValues =  
 firstName: string 
 lastName: string 
 sex: string 
 
> 
 
export default function App()  
 
const onSubmit = (data: FormValues) => console.log(data) 
 
return ( 
 
FormFormValues> onSubmit=onSubmit>> 
 
( register >) => ( 
 
> 
 
Input . register("firstName")> /> 
 
Input . register("lastName")> /> 
 
Select
 
. register("sex")> 
 options=[ 
 
 label: "Female", value: "female" >, 
 
 label: "Male", value: "male" >, 
 
 label: "Other", value: "other" >, 
 
]> 
 
/> 
 
Input type="submit" /> 
 
/> 
 
)> 
 
/Form> 
 
) 
 
>

UseFormProps

export type UseFormProps 
 TFieldValues extends FieldValues = FieldValues, 
 TContext extends object = object
 
> = Partial 
 mode: Mode
 reValidateMode: Mode
 defaultValues: DeepPartialTFieldValues> 
 resolver: ResolverTFieldValues, TContext> 
 context: TContext
 shouldFocusError: boolean 
 shouldUnregister: boolean 
 criteriaMode: "firstError" | "all" 
 
>>

UseFieldArrayReturn

export type UseFieldArrayReturn 
 TFieldValues extends FieldValues = FieldValues, 
 TFieldArrayName extends FieldArrayPathTFieldValues> = FieldArrayPathTFieldValues>, 
 TKeyName extends string = "id" 
 
> =  
 
swap: (indexA: number, indexB: number) => void 
 
move: (indexA: number, indexB: number) => void 
 
prepend: ( 
 value: 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>> 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>>[], 
 options?: FieldArrayMethodProps
 
) => void 
 
append: ( 
 value: 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>> 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>>[], 
 options?: FieldArrayMethodProps
 
) => void 
 
remove: (index?: number | number[]) => void 
 
insert: ( 
 index: number, 
 value: 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>> 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>>[], 
 options?: FieldArrayMethodProps
 
) => void 
 
update: ( 
 index: number, 
 value: PartialFieldArrayTFieldValues, TFieldArrayName>> 
 
) => void 
 
replace: ( 
 value: 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>> 
 
| PartialFieldArrayTFieldValues, TFieldArrayName>>[] 
 
) => void 
 fields: FieldArrayWithIdTFieldValues, TFieldArrayName, TKeyName>[] 
 
>

UseFieldArrayProps

export type UseFieldArrayProps 
 TKeyName extends string = "id", 
 TControl extends Control = Control
 
> =  
 name: string 
 keyName?: TKeyName
 control?: TControl
 rules?: Pick 
 RegisterOptionsTFieldValues>, 
 
"maxLength" | "minLength" | "validate" | "required" 
 
> 
 
>

UseControllerReturn

export type UseControllerReturn 
 TFieldValues extends FieldValues = FieldValues, 
 TName extends FieldPathTFieldValues> = FieldPathTFieldValues> 
 
> =  
 field: ControllerRenderPropsTFieldValues, TName> 
 formState: UseFormStateReturnTFieldValues> 
 fieldState: ControllerFieldState
 
>

UseControllerProps

export type UseControllerProps 
 TFieldValues extends FieldValues = FieldValues, 
 TName extends FieldPathTFieldValues> = FieldPathTFieldValues> 
 
> =  
 name: TName
 rules?: Omit 
 RegisterOptionsTFieldValues, TName>, 
 
"valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled" 
 
> 
 shouldUnregister?: boolean 
 defaultValue?: FieldPathValueTFieldValues, TName> 
 control?: ControlTFieldValues> 
 
>

FieldError

export type FieldError =  
 type: string 
 ref?: Ref
 types?: MultipleFieldErrors
 message?: Message
 
>

FieldErrors

export type FieldErrorsTFieldValues extends FieldValues = FieldValues> = 
 DeepMapTFieldValues, FieldError>

Field

export type Field =  
 ref: Ref
 mutationWatcher?: MutationWatcher
 options?: RadioOrCheckboxOption[] 
 
> & RegisterOptions

FieldPath

This type is useful when you define custom component’s name prop, and it will type check again your field path.

export type FieldPathTFieldValues extends FieldValues> = PathTFieldValues>

FieldPathByValue

This type will return union with all available paths that match the passed value

function Field 
 TFieldValues extends FieldValues, 
 TPath extends FieldPathByValueTFieldValues, Date> 
 
>( control, name >:  control: ControlTFieldValues>; name: TPath >)  
 
const  field > = useController( 
 control, 
 name, 
 
>) 
 
>

FieldValues

export type FieldValues = Recordstring, any>

FieldArrayWithId

export type FieldArrayWithId 
 TFieldValues extends FieldValues = FieldValues, 
 TFieldArrayName extends FieldArrayPathTFieldValues> = FieldArrayPathTFieldValues>, 
 TKeyName extends string = "id" 
 
> = FieldArrayTFieldValues, TFieldArrayName> & RecordTKeyName, string>

Mode

export type Mode =  
 onBlur: "onBlur" 
 onChange: "onChange" 
 onSubmit: "onSubmit" 
 onTouched: "onTouched" 
 all: "all" 
 
>

RegisterOptions

export type RegisterOptions = Partial 
 required: Message | ValidationRuleboolean> 
 min: ValidationRulenumber | string> 
 max: ValidationRulenumber | string> 
 maxLength: ValidationRulenumber | string> 
 minLength: ValidationRulenumber | string> 
 pattern: ValidationRuleRegExp> 
 validate: Validate | Recordstring, Validate> 
 
>>

FormStateProxy

export type FormStateProxyTFieldValues extends FieldValues = FieldValues> =  
 isDirty: boolean 
 dirtyFields: DirtiedTFieldValues> 
 isSubmitted: boolean 
 submitCount: number 
 touched: FieldNamesTFieldValues> 
 isSubmitting: boolean 
 isValid: boolean 
 errors: FieldErrorsTFieldValues> 
 
>

NestedValue (Deprecated at 7.33.0)

import React from "react" 
 
import  useForm, NestedValue > from "react-hook-form" 
 
import  Autocomplete, TextField, Select > from "@material-ui/core" 
 
import  Autocomplete > from "@material-ui/lab" 
 
type Option =  
 label: string 
 value: string 
 
> 
 
const options = [ 
 
 label: "Chocolate", value: "chocolate" >, 
 
 label: "Strawberry", value: "strawberry" >, 
 
 label: "Vanilla", value: "vanilla" >, 
 
] 
 
export default function App()  
 
const  
 register, 
 handleSubmit, 
 watch, 
 setValue, 
 formState:  errors >, 
 
> = useForm 
 autocomplete: NestedValueOption[]> 
 select: NestedValuenumber[]> 
 
>>( 
 defaultValues:  autocomplete: [], select: [] >, 
 
>) 
 
const onSubmit = handleSubmit((data) => console.log(data)) 
 
 React.useEffect(() =>  
 
register("autocomplete",  
 
validate: (value) => value.length || "This is required.", 
 
>) 
 
register("select",  
 
validate: (value) => value.length || "This is required.", 
 
>) 
 
>, [register]) 
 
return ( 
 
form onSubmit=onSubmit>> 
 
Autocomplete
 options=options> 
 getOptionLabel=(option: Option) => option.label> 
 onChange=(e, options) => setValue("autocomplete", options)> 
 renderInput=(params) => ( 
 
TextField
 
. params> 
 error=Boolean(errors?.autocomplete)> 
 helperText=errors?.autocomplete?.message> 
 
/> 
 
)> 
 
/> 
 
Select
 value="" 
 onChange=(e) => setValue("muiSelect", e.target.value as number[])> 
 
> 
 
MenuItem value=10>>Ten/MenuItem> 
 
MenuItem value=20>>Twenty/MenuItem> 
 
/Select> 
 
input type="submit" /> 
 
/form> 
 
) 
 
>

import  useForm, NestedValue > from "react-hook-form" 
 
type FormValues =  
 key1: string 
 key2: number 
 key3: NestedValue 
 key1: string 
 key2: number 
 
>> 
 key4: NestedValuestring[]> 
 
> 
 
const  
 formState:  errors >, 
 
> = useFormFormValues>() 
 
errors?.key1?.message // no type error 
errors?.key2?.message // no type error 
errors?.key3?.message // no type error 
errors?.key4?.message // no type error

Thank you for your support

If you find React Hook Form to be useful in your project, please consider to star and support it.

A project by BEEKAI | Please support us by leaving a ★ @github

Источник