{"id":19814921,"url":"https://github.com/react-hook-form/codemod","last_synced_at":"2025-05-01T10:31:25.069Z","repository":{"id":48201347,"uuid":"337552299","full_name":"react-hook-form/codemod","owner":"react-hook-form","description":"Migrate React Hook Form V6 to V7 made simple.","archived":false,"fork":false,"pushed_at":"2021-08-05T07:01:04.000Z","size":184,"stargazers_count":26,"open_issues_count":4,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-21T01:28:25.255Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-hook-form.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-09T22:21:25.000Z","updated_at":"2024-03-04T17:31:35.000Z","dependencies_parsed_at":"2022-09-04T12:00:14.783Z","dependency_job_id":null,"html_url":"https://github.com/react-hook-form/codemod","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fcodemod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fcodemod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fcodemod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-hook-form%2Fcodemod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-hook-form","download_url":"https://codeload.github.com/react-hook-form/codemod/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250797781,"owners_count":21488971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T10:03:47.239Z","updated_at":"2025-05-01T10:31:25.031Z","avatar_url":"https://github.com/react-hook-form.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ca href=\"https://react-hook-form.com\" title=\"React Hook Form - Simple React forms validation\"\u003e\n            \u003cimg src=\"https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/docs/logo.png\" alt=\"React Hook Form Logo - React hook custom hook for form validation\" width=\"300px\" /\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003ePerformant, flexible and extensible forms with easy to use validation.\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm downloads](https://img.shields.io/npm/dm/@hookform/codemod.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/codemod)\n[![npm](https://img.shields.io/npm/dt/@hookform/codemod.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/codemod)\n[![npm](https://img.shields.io/bundlephobia/minzip/@hookform/codemod?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/codemod)\n\n\u003c/div\u003e\n\n## Goal\n\nMigrate your React Hook Form codebase from older version to new without the hassle by using our codemod scripts\n\n## Usage\n\n`npx @hookform/codemod \u003ctransform\u003e \u003cpath\u003e [...options]`\n\n- `transform` - name of transform, see available transforms below.\n- `path` - files or directory to transform\n- use the `--dry` option for a dry-run and use `--print` to print the output for comparison\n\nThis will start an interactive wizard, and then run the specified transform.\n\n## Included transforms\n\n### Migrate from V6 to V7\n\n#### `v7/update-register`\n\nUpdate 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`.\n\n    npx @hookform/codemod v7/update-register\n\n\u003cdetails\u003e\n    \u003csummary\u003eExamples\u003c/summary\u003e\n\n```diff\n- \u003cinput ref={register} name=\"example\" /\u003e\n+ \u003cinput {...register('example')} /\u003e\n\n- \u003cinput ref={register()} name=\"example\" /\u003e\n+ \u003cinput {...register('example')} /\u003e\n\n- \u003cinput ref={register()} name=\"example\" /\u003e\n+ \u003cinput {...register('example')} /\u003e\n\n- \u003cinput ref={register({ required: true })} name=\"example\" /\u003e\n+ \u003cinput {...register('example', { required: true })} /\u003e\n\n- \u003cTextInput ref={register({ required: true })} name=\"example\" /\u003e\n+ \u003cTextInput {...register('example', { required: true })} /\u003e\n```\n\nWith a custom `register` name\n\n```diff\n    function MyForm() {\n      const { register: customRegister } = useForm();\n\n      return (\n        \u003cform\u003e\n-         \u003cinput ref={customRegister} name=\"example\" /\u003e\n+         \u003cinput {...customRegister('example')} /\u003e\n        \u003c/form\u003e\n      );\n    }\n```\n\n\u003c/details\u003e\n\n#### `v7/move-errors-to-formState`\n\nIt 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`.\n\n    npx @hookform/codemod v7/move-errors-to-formState\n\n\u003cdetails\u003e\n    \u003csummary\u003eExamples\u003c/summary\u003e\n\n```diff\n- const { errors } = useForm();\n+ const { formState: { errors } } = useForm();\n\n- const { errors: customErrors } = useForm();\n+ const { formState: { errors: customErrors } } = useForm();\n\n- const { errors, formState: { isDirty } } = useForm();\n+ const { formState: { isDirty, errors } } = useForm();\n\n- const { errors: customErrors, formState: { isDirty } } = useForm();\n+ const { formState: { isDirty, errors: customErrors } } = useForm();\n```\n\nWith a custom `register` name\n\n```diff\n    function MyForm() {\n-     const { errors, formState } = useForm();\n+     const { formState } = useForm();\n+     const { errors } = formState;\n\n      const isDirty = formState.isDirty;\n\n      return (\n        //\n      );\n    }\n```\n\n\u003c/details\u003e\n\n## Backers\n\nThanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].\n\n\u003ca href=\"https://opencollective.com/react-hook-form#backers\"\u003e\n    \u003cimg src=\"https://opencollective.com/react-hook-form/backers.svg?width=950\" /\u003e\n\u003c/a\u003e\n\n## Organizations\n\nThanks goes to these wonderful organizations! [[Contribute](https://opencollective.com/react-hook-form/contribute)].\n\n\u003ca href=\"https://github.com/react-hook-form/react-hook-form/graphs/contributors\"\u003e\n    \u003cimg src=\"https://opencollective.com/react-hook-form/organizations.svg?width=950\" /\u003e\n\u003c/a\u003e\n\n## Contributors\n\nThanks goes to these wonderful people! [[Become a contributor](CONTRIBUTING.md)].\n\n\u003ca href=\"https://github.com/react-hook-form/react-hook-form/graphs/contributors\"\u003e\n    \u003cimg src=\"https://opencollective.com/react-hook-form/contributors.svg?width=950\" /\u003e\n\u003c/a\u003e\n","funding_links":["https://opencollective.com/react-hook-form","https://opencollective.com/react-hook-form/contribute"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-hook-form%2Fcodemod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-hook-form%2Fcodemod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-hook-form%2Fcodemod/lists"}