react-hook-form/codemod

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

[![npm downloads](https://img.shields.io/npm/dm/@hookform/codemod.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/codemod) [![npm](https://img.shields.io/npm/dt/@hookform/codemod.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/codemod) [![npm](https://img.shields.io/bundlephobia/minzip/@hookform/codemod?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/codemod)

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

```diff - + - + - + - + - + ``` With a custom `register` name ```diff function MyForm() { const { register: customRegister } = useForm(); return ( ); } ```

`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

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