{"id":16791338,"url":"https://github.com/jsun969/react-hook-form-antd","last_synced_at":"2026-04-05T18:01:18.704Z","repository":{"id":152147608,"uuid":"623444222","full_name":"jsun969/react-hook-form-antd","owner":"jsun969","description":"📋🐜 Master your Ant Design form with React Hook Form! 用 React Hook Form 拿捏你的 Ant Design 表单！","archived":false,"fork":false,"pushed_at":"2024-09-13T07:37:59.000Z","size":290,"stargazers_count":59,"open_issues_count":10,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-14T08:34:36.197Z","etag":null,"topics":["ant-design","antd","form","react","react-hook-form","react-hooks"],"latest_commit_sha":null,"homepage":"https://npm.im/react-hook-form-antd","language":"TypeScript","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/jsun969.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-04T11:39:44.000Z","updated_at":"2024-09-24T14:39:23.000Z","dependencies_parsed_at":"2023-11-10T12:52:23.836Z","dependency_job_id":"091cd350-6aa5-4143-911d-ad1702305a9c","html_url":"https://github.com/jsun969/react-hook-form-antd","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Freact-hook-form-antd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Freact-hook-form-antd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Freact-hook-form-antd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsun969%2Freact-hook-form-antd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsun969","download_url":"https://codeload.github.com/jsun969/react-hook-form-antd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248143157,"owners_count":21054719,"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":["ant-design","antd","form","react","react-hook-form","react-hooks"],"created_at":"2024-10-13T08:34:36.216Z","updated_at":"2026-04-05T18:01:18.696Z","avatar_url":"https://github.com/jsun969.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 📋 React Hook Form Antd 🐜\n\nMaster your Ant Design form with React Hook Form!\n\n[![version](https://img.shields.io/npm/v/react-hook-form-antd?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form-antd)\n[![license](https://img.shields.io/npm/l/react-hook-form-antd?style=for-the-badge)](https://github.com/jsun969/react-hook-form-antd/blob/main/LICENSE)\n[![size](https://img.shields.io/bundlephobia/minzip/react-hook-form-antd?style=for-the-badge)](https://bundlephobia.com/result?p=react-hook-form-antd)\n[![downloads](https://img.shields.io/npm/dw/react-hook-form-antd?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form-antd)\n\nEnglish | [简体中文](./README_zh-CN.md)\n\n\u003c/div\u003e\n\n## 📜 Requirement\n\n- [react-hook-form](https://github.com/react-hook-form/react-hook-form) `^7`\n- [antd](https://github.com/ant-design/ant-design) `^5`\n\n## 🕶 Example\n\n[EXAMPLE](https://codesandbox.io/s/react-hook-form-antd-example-6s0i3z?file=/src/App.tsx)\n\n## 📦 Installation\n\n```bash\nnpm install react-hook-form-antd\n```\n\n## 🎯 Quickstart\n\nYou may have an original antd form like below\n\n\u003cdetails\u003e\n\u003csummary\u003eShow code\u003c/summary\u003e\n\n```tsx\n\u003cForm onFinish={onFinish}\u003e\n\t\u003cForm.Item\n\t\tlabel=\"Username\"\n\t\tname=\"username\"\n\t\trules={[\n\t\t\t{ required: true, message: 'Required' },\n\t\t\t{ max: 15, message: 'Username should be less than 15 characters' },\n\t\t]}\n\t\u003e\n\t\t\u003cInput /\u003e\n\t\u003c/Form.Item\u003e\n\t\u003cForm.Item\n\t\tlabel=\"Password\"\n\t\tname=\"password\"\n\t\trules={[{ required: true, message: 'Required' }]}\n\t\u003e\n\t\t\u003cInput.Password /\u003e\n\t\u003c/Form.Item\u003e\n\t\u003cForm.Item name=\"remember\" valuePropName=\"checked\"\u003e\n\t\t\u003cCheckbox\u003eRemember me\u003c/Checkbox\u003e\n\t\u003c/Form.Item\u003e\n\t\u003cForm.Item\u003e\n\t\t\u003cButton type=\"primary\" htmlType=\"submit\"\u003e\n\t\t\tSubmit\n\t\t\u003c/Button\u003e\n\t\u003c/Form.Item\u003e\n\u003c/Form\u003e\n```\n\n\u003c/details\u003e\n\nCheck the [EXAMPLE](https://codesandbox.io/s/react-hook-form-antd-example-6s0i3z?file=/src/App.tsx) for this form after using `react-hook-form-antd`!\n\nAll you need to do:\n\n1. Use `useForm` from `react-hook-form` and get `control`\n2. Use `FormItem` from `react-hook-form-antd` instead of `Form.Item`\n   - Pass `control` to all `FormItem` (Field names can be inferred by `control` 😎)\n   - Remove `rules` and use [react hook form resolver](https://github.com/react-hook-form/resolvers) instead (You can use schema from any validation libraries 🤩)\n   - Use `handleSubmit` in `onFinish`\n3. Enjoy! 🎉\n\n## 🕹 API\n\n### 🔗 `FormItem`\n\n\u003e Ant Design `Form.Item` [API](https://ant.design/components/form#formitem)\n\nA component instead of `Form.Item` in antd. It has inherited all props from `Form.Item` except `rules` `validateStatus` (If you need rules, please use [react hook form resolver](https://github.com/react-hook-form/resolvers) instead)\n\nAdded and modified props:\n\n| Prop      | Type    | Description                                                                       |\n| --------- | ------- | --------------------------------------------------------------------------------- |\n| `control` | Control | [control object](https://react-hook-form.com/api/useform/control/) from `useForm` |\n| `name`    | string  | form field name                                                                   |\n\n## 🚧 Known Issues\n\n#### TypeError: elm.focus is not a function\n\nWhen using an upload component, set `shouldFocusError: false` in your `useForm` configuration. This will prevent React Hook Form from trying to focus on the error, effectively resolving the issue.\n\n## 👥 Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://jsun.lol\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/29330847?v=4?s=100\" width=\"100px;\" alt=\"Yeyang (Justin) Sun\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYeyang (Justin) Sun\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=jsun969\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-jsun969\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#maintenance-jsun969\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=jsun969\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/jakub-szewczyk\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/134627903?v=4?s=100\" width=\"100px;\" alt=\"Jakub Szewczyk\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJakub Szewczyk\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=jakub-szewczyk\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/dmuharemagic\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2150642?v=4?s=100\" width=\"100px;\" alt=\"Dino Muharemagić\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDino Muharemagić\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=dmuharemagic\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/jsun969/react-hook-form-antd/issues?q=author%3Admuharemagic\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/avegatolber\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/159487029?v=4?s=100\" width=\"100px;\" alt=\"avegatolber\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eavegatolber\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=avegatolber\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/jsun969/react-hook-form-antd/issues?q=author%3Aavegatolber\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://dev.ahmedrowaihi.lol\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/67356781?v=4?s=100\" width=\"100px;\" alt=\"Ahmed Rowaihi\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAhmed Rowaihi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=ahmedrowaihi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/yorman2401\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/66335054?v=4?s=100\" width=\"100px;\" alt=\"Yorman Rodriguez\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYorman Rodriguez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/issues?q=author%3Ayorman2401\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://snndmnsz.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/42818330?v=4?s=100\" width=\"100px;\" alt=\"Sinan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSinan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=snndmnsz\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/nagamejun\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/18486040?v=4?s=100\" width=\"100px;\" alt=\"nagamejun\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003enagamejun\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/issues?q=author%3Anagamejun\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/jsun969/react-hook-form-antd/commits?author=nagamejun\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Anav11\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/43610000?v=4?s=100\" width=\"100px;\" alt=\"Andrey\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jsun969/react-hook-form-antd/issues?q=author%3AAnav11\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/ray-overjet\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/181789459?v=4?s=100\" width=\"100px;\" alt=\"ray-overjet\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eray-overjet\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-ray-overjet\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/NewYorkStyle\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/39958500?v=4?s=100\" width=\"100px;\" alt=\"NewYorkStyle\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNewYorkStyle\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-NewYorkStyle\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-NewYorkStyle\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsun969%2Freact-hook-form-antd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsun969%2Freact-hook-form-antd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsun969%2Freact-hook-form-antd/lists"}