@hookform/codemod
v1.2.1
<div align="center"> <p align="center"> <a href="https://react-hook-form.com" title="React Hook Form - Simple React forms validation"> <img src="https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/docs/logo.png" a
113/weekUpdated 3 years agoMITUnpacked: 39.6 KB
Published by bluebill1049
npm install @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 - 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
$3
#### 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 (
);
}
`
####
It moves
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
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].
