jsun969 / react-hook-form-antd

๐Ÿ“‹๐Ÿœ Master your Ant Design form with React Hook Form! ็”จ React Hook Form ๆ‹ฟๆไฝ ็š„ Ant Design ่กจๅ•๏ผ
https://npm.im/react-hook-form-antd
MIT License
61 stars 10 forks source link
ant-design antd form react react-hook-form react-hooks
# ๐Ÿ“‹ React Hook Form Antd ๐Ÿœ Master your And Design form with React Hook Form! [![version](https://img.shields.io/npm/v/react-hook-form-antd?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form-antd) [![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) [![size](https://img.shields.io/bundlephobia/minzip/react-hook-form-antd?style=for-the-badge)](https://bundlephobia.com/result?p=react-hook-form-antd) [![downloads](https://img.shields.io/npm/dw/react-hook-form-antd?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form-antd) English | [็ฎ€ไฝ“ไธญๆ–‡](./README_zh-CN.md)

๐Ÿ“œ Requirement

๐Ÿ•ถ Example

EXAMPLE

๐Ÿ“ฆ Installation

npm install react-hook-form-antd

๐ŸŽฏ Quickstart

You may have an original antd form like below

Show code ```tsx
Remember me
```

Check the EXAMPLE 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 instead (You can use schema from any validation libraries ๐Ÿคฉ)
    • Use handleSubmit in onFinish
  3. Enjoy! ๐ŸŽ‰

๐Ÿ•น API

๐Ÿ”— FormItem

Ant Design Form.Item API

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 instead)

Added and modified props:

Prop Type Description
control Control control object 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):

Yeyang (Justin) Sun
Yeyang (Justin) Sun

๐Ÿ’ป ๐Ÿค” ๐Ÿšง ๐Ÿ“–
Jakub Szewczyk
Jakub Szewczyk

๐Ÿ’ป
Dino Muharemagiฤ‡
Dino Muharemagiฤ‡

๐Ÿ’ป ๐Ÿ›
avegatolber
avegatolber

๐Ÿ’ป ๐Ÿ›
Ahmed Rowaihi
Ahmed Rowaihi

๐Ÿ’ป
Yorman Rodriguez
Yorman Rodriguez

๐Ÿ›
Sinan
Sinan

๐Ÿ“–
nagamejun
nagamejun

๐Ÿ› ๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!