react-hook-form-v7-codemod

Codemod for migrating code from react-hook-form v6 patterns to v7 patterns imported from react-hook-form-v7 (an npm alias package for RHF v7).

Usage

Run against the current directory:

npx react-hook-form-v7-codemod

Run against another directory:

npx react-hook-form-v7-codemod --root ../my-app

Dry-run and print transformed output:

npx react-hook-form-v7-codemod --root ../my-app --dry --print

Custom include/exclude globs:

npx react-hook-form-v7-codemod --root ../my-app --include "**/*.{ts,tsx,js,jsx}" --exclude "**/*.test.tsx,**/generated/**"

What the codemod changes

• Rewrites react-hook-form imports/requires to react-hook-form-v7.
• Rewrites deprecated useTypedController import/calls to useController.
• Rewrites v6 errors destructuring from useForm() / useFormContext() to formState.errors:
  • const { errors } = useForm() -> const { formState: { errors } } = useForm()
• Rewrites v6 register ref patterns to v7 spread registration when safely derivable:
  • <input name="x" ref={register} /> -> <input {...register('x')} />
  • <input name="x" ref={register({ required: true })} /> -> <input {...register('x', { required: true })} />
• Rewrites custom register object-name calls:
  • register({ name: 'field' }) -> register('field')
  • register({ name: 'field', required: true }) -> register('field', { required: true })
• Rewrites Controller as={...} usage to render={({ field }) => ...} usage.
• Rewrites renamed useForm / useFormContext APIs:
  • clearError -> clearErrors
  • triggerValidation -> trigger
  • Handles both destructured methods and member access on const methods = useForm().
• Rewrites setError v6 shouldFocus shape:
  • setError(name, { ..., shouldFocus: true }) -> setError(name, { ... }, { shouldFocus: true })
• Rewrites watch array destructuring:
  • const { a, b } = watch(['a', 'b']) -> const [a, b] = watch(['a', 'b'])
• Rewrites reset options rename:
  • reset(values, { isDirty: true }) -> reset(values, { keepDirty: true })
• Rewrites touched to touchedFields on formState usage.
• Rewrites useFieldArray focus boolean args to options objects:
  • append(value, false) -> append(value, { shouldFocus: false })
  • prepend(value, true) -> prepend(value, { shouldFocus: true })
  • insert(index, value, false) -> insert(index, value, { shouldFocus: false })

Best-effort behavior

For patterns that cannot be migrated deterministically, the codemod preserves code and adds an inline marker:

TODO(rhf-v7-codemod): verify migration

Typical ambiguous cases:

• Dynamic or missing field names in ref-based registration patterns.
• Mixed/overlapping destructuring (errors together with existing complex formState usage).
• Dynamic or otherwise non-deterministic register/watch migration shapes.
• Controller and setError patterns that already include overlapping v7-style arguments/props.

Verification workflow

After codemod execution:

1. Run project tests.
2. Run type-check (tsc --noEmit or project equivalent).
3. Search for TODO(rhf-v7-codemod): verify migration and resolve each occurrence manually.
4. Re-run the codemod to confirm idempotency (no further changes).