# ๐ React Hook Form Antd ๐
Master your Ant Design form with React Hook Form!
[](https://www.npmjs.com/package/react-hook-form-antd)
[](https://github.com/jsun969/react-hook-form-antd/blob/main/LICENSE)
[](https://bundlephobia.com/result?p=react-hook-form-antd)
[](https://www.npmjs.com/package/react-hook-form-antd)
English | [็ฎไฝไธญๆ](./README_zh-CN.md)
## ๐ Requirement
- [react-hook-form](https://github.com/react-hook-form/react-hook-form) `^7`
- [antd](https://github.com/ant-design/ant-design) `^5`
## ๐ถ Example
[EXAMPLE](https://codesandbox.io/s/react-hook-form-antd-example-6s0i3z?file=/src/App.tsx)
## ๐ฆ Installation
```bash
npm install react-hook-form-antd
```
## ๐ฏ Quickstart
You may have an original antd form like below
Show code
```tsx
```
Check 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`!
All you need to do:
1. Use `useForm` from `react-hook-form` and get `control`
2. Use `FormItem` from `react-hook-form-antd` instead of `Form.Item`
- Pass `control` to all `FormItem` (Field names can be inferred by `control` ๐)
- Remove `rules` and use [react hook form resolver](https://github.com/react-hook-form/resolvers) instead (You can use schema from any validation libraries ๐คฉ)
- Use `handleSubmit` in `onFinish`
3. Enjoy! ๐
## ๐น API
### ๐ `FormItem`
> Ant Design `Form.Item` [API](https://ant.design/components/form#formitem)
A 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)
Added and modified props:
| Prop | Type | Description |
| --------- | ------- | --------------------------------------------------------------------------------- |
| `control` | Control | [control object](https://react-hook-form.com/api/useform/control/) from `useForm` |
| `name` | string | form field name |
## ๐ง Known Issues
#### TypeError: elm.focus is not a function
When 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.
## ๐ฅ Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
