https://github.com/jsun969/react-hook-form-antd
๐๐ Master your Ant Design form with React Hook Form! ็จ React Hook Form ๆฟๆไฝ ็ Ant Design ่กจๅ๏ผ
https://github.com/jsun969/react-hook-form-antd
ant-design antd form react react-hook-form react-hooks
Last synced: about 2 months ago
JSON representation
๐๐ Master your Ant Design form with React Hook Form! ็จ React Hook Form ๆฟๆไฝ ็ Ant Design ่กจๅ๏ผ
- Host: GitHub
- URL: https://github.com/jsun969/react-hook-form-antd
- Owner: jsun969
- License: mit
- Created: 2023-04-04T11:39:44.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-13T07:37:59.000Z (over 1 year ago)
- Last Synced: 2024-10-14T08:34:36.197Z (over 1 year ago)
- Topics: ant-design, antd, form, react, react-hook-form, react-hooks
- Language: TypeScript
- Homepage: https://npm.im/react-hook-form-antd
- Size: 283 KB
- Stars: 59
- Watchers: 2
- Forks: 10
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ๐ 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
Remember me
Submit
```
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)):
Yeyang (Justin) Sun
๐ป ๐ค ๐ง ๐
Jakub Szewczyk
๐ป
Dino Muharemagiฤ
๐ป ๐
avegatolber
๐ป ๐
Ahmed Rowaihi
๐ป
Yorman Rodriguez
๐
Sinan
๐
nagamejun
๐ ๐ป
Andrey
๐
ray-overjet
๐
NewYorkStyle
๐ ๐ง
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!