Skip to content

react-hook-form/codemod

Repository files navigation

Performant, flexible and extensible forms with easy to use validation.

npm downloads npm npm

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