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 --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.

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

- <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

- 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].