react-hook-form-antd

📋🐜 React Hook Form Antd

Master your And Design form with React Hook Form!

English | 简体中文

📜 Requirement

react-hook-form ^7
antd ^5

🕶 Example

EXAMPLE

📦 Installation

npm install react-hook-form-antd

🎯 Quickstart

You may have an original antd form like below

Show code

<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 from react-hook-form and get control
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
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 normalize 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

View Source Code

Post Views: 120