codemod
codemod copied to clipboard
react-hook-form
Migrate React Hook Form V6 to V7 made simple.
Performant, flexible and extensible forms with easy to use validation.
Goal
Migrate your React Hook Form codebase from older version to new without the hassle by using our codemod scripts
Usage
npx @hookform/codemod <transform> <path> [...options]
transform- name of transform, see available transforms below.path- files or directory to transform- use the
--dryoption for a dry-run and use--printto print the output for comparison
This will start an interactive wizard, and then run the specified transform.
Included transforms
Migrate from V6 to V7
v7/update-register
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>
);
}
v7/move-errors-to-formState
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 (
//
);
}
Backers
Thanks goes to all our backers! [Become a backer].
Organizations
Thanks goes to these wonderful organizations! [Contribute].
Contributors
Thanks goes to these wonderful people! [Become a contributor].
Metadata
Owner
react-hook-form
Metadata
Migrate React Hook Form V6 to V7 made simple.