react-hook-form-antd
v1.1.1
Published
Master your And Design form with React Hook Form!
Downloads
8,224
Maintainers
Readme
📋 React Hook Form Antd 🐜
Master your And Design form with React Hook Form!
English | 简体中文
📜 Requirement
- react-hook-form
^7
- antd
^5
🕶 Example
📦 Installation
npm install react-hook-form-antd
🎯 Quickstart
You may have an original antd form like below
<Form onFinish={onFinish}>
<Form.Item
label="Username"
name="username"
rules={[
{ required: true, message: 'Required' },
{ max: 15, message: 'Username should be less than 15 characters' },
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Required' }]}
>
<Input.Password />
</Form.Item>
<Form.Item name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
Check the EXAMPLE for this form after using react-hook-form-antd
!
All you need to do:
- Use
useForm
fromreact-hook-form
and getcontrol
- Use
FormItem
fromreact-hook-form-antd
instead ofForm.Item
- Pass
control
to allFormItem
(Field names can be inferred bycontrol
😎) - Remove
rules
and use react hook form resolver instead (You can use schema from any validation libraries 🤩) - Use
handleSubmit
inonFinish
- Pass
- 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 |
👥 Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!