@hookform/codemod

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

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