https://github.com/react-hook-form/codemod
Migrate React Hook Form V6 to V7 made simple.
https://github.com/react-hook-form/codemod
Last synced: about 2 months ago
JSON representation
Migrate React Hook Form V6 to V7 made simple.
- Host: GitHub
- URL: https://github.com/react-hook-form/codemod
- Owner: react-hook-form
- License: mit
- Created: 2021-02-09T22:21:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-05T07:01:04.000Z (almost 4 years ago)
- Last Synced: 2025-04-21T01:28:25.255Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 180 KB
- Stars: 26
- Watchers: 3
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Performant, flexible and extensible forms with easy to use validation.
[](https://www.npmjs.com/package/@hookform/codemod)
[](https://www.npmjs.com/package/@hookform/codemod)
[](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 [...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](https://opencollective.com/react-hook-form#backer)].
## Organizations
Thanks goes to these wonderful organizations! [[Contribute](https://opencollective.com/react-hook-form/contribute)].
## Contributors
Thanks goes to these wonderful people! [[Become a contributor](CONTRIBUTING.md)].
