Skip to content

๐Ÿ“‹๐Ÿœ Master your And Design form with React Hook Form! ็”จ React Hook Form ๆ‹ฟๆไฝ ็š„ Ant Design ่กจๅ•๏ผ

License

Notifications You must be signed in to change notification settings

jakub-szewczyk/react-hook-form-antd

ย 
ย 

Repository files navigation

๐Ÿ“‹๐Ÿœ React Hook Form Antd

Master your And Design form with React Hook Form!

version license size

English | ็ฎ€ไฝ“ไธญๆ–‡

๐Ÿ“œ Requirement

๐Ÿ•ถ 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:

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

About

๐Ÿ“‹๐Ÿœ Master your And Design form with React Hook Form! ็”จ React Hook Form ๆ‹ฟๆไฝ ็š„ Ant Design ่กจๅ•๏ผ

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 70.4%
  • JavaScript 21.8%
  • HTML 7.8%