Performant, flexible and extensible forms with easy to use validation.
Migrate your React Hook Form codebase from older version to new without the hassle by using our codemod scripts
npx @hookform/codemod <transform> <path> [...options]
transform
- name of transform, see available transforms below.path
- files or directory to transform- use the
--dry
option for a dry-run and use--print
to print the output for comparison
This will start an interactive wizard, and then run the specified transform.
Update the register
API inside a component that use useForm
of React Hook Form. This transform is not applied if the component doesn't use useForm
.
npx @hookform/codemod v7/update-register
Examples
- <input ref={register} name="example" />
<input {...register('example')} />
- <input ref={register()} name="example" />
<input {...register('example')} />
- <input ref={register()} name="example" />
<input {...register('example')} />
- <input ref={register({ required: true })} name="example" />
<input {...register('example', { required: true })} />
- <TextInput ref={register({ required: true })} name="example" />
<TextInput {...register('example', { required: true })} />
With a custom register
name
function MyForm() {
const { register: customRegister } = useForm();
return (
<form>
- <input ref={customRegister} name="example" />
<input {...customRegister('example')} />
</form>
);
}
It moves errors
API into formState
inside a component that use useForm
of React Hook Form. This transform is not applied if the component doesn't use useForm
.
npx @hookform/codemod v7/move-errors-to-formState
Examples
- const { errors } = useForm();
const { formState: { errors } } = useForm();
- const { errors: customErrors } = useForm();
const { formState: { errors: customErrors } } = useForm();
- const { errors, formState: { isDirty } } = useForm();
const { formState: { isDirty, errors } } = useForm();
- const { errors: customErrors, formState: { isDirty } } = useForm();
const { formState: { isDirty, errors: customErrors } } = useForm();
With a custom register
name
function MyForm() {
- const { errors, formState } = useForm();
const { formState } = useForm();
const { errors } = formState;
const isDirty = formState.isDirty;
return (
//
);
}
Thanks goes to all our backers! [Become a backer].
Thanks goes to these wonderful organizations! [Contribute].
Thanks goes to these wonderful people! [Become a contributor].