Ant Plus 5, Ant Design Form Simplified, make forms easier

Ant Design Form Simplified, build Form in the simplest way.

Now Ant Plus 5 is released, redesigned and rewritten with TypeScript.

GitHub

https://github.com/nanxiaobei/ant-plus

Feature

• Say goodbye to cumbersome <Form.Item> and rules
• Full TypeScript hinting support
• Easily extend existing form components

Installation

pnpm add antx
# or
yarn add antx
# or
npm i antx

Usage

import { Button, Form, Input, Select, WrapperCol } from 'antx';

const App = () => {
  return (
    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
      <Input label="Name" name="name" rules={['required', 'max=10']} />
      <Select
        label="Gender"
        name="gender"
        rules={['required']}
        options={[
          { value: 1, label: 'Male' },
          { value: 2, label: 'Female' },
        ]}
      />
      <InputNumber
        label="Age"
        name="age"
        rules={['required', 'number', 'min=0']}
      />
      <WrapperCol>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </WrapperCol>
    </Form>
  );
};
export default App;

Introduction

antx provides a set of antd enhanced form field components, features of enhanced components:

1. No need to write <Form.Item>
Directly mix Form.Item props with the original field component props (full TypeScript hints), which greatly simplifies the code.

2. Simplified rules (only enhanced, original rules is also supported)
Provide rules in string phrase, for example rules={['required', 'max=10']} represents for rules={[{ required: true }, { max: 10 }]}.

3. Not add any other props
All props are antd original props, without adding any other props and APIs, reducing mental burden.

In addition, antx also provides 3 original components (Form, Button, Item), 2 custom components (WrapperCol, Watch), and a tool function create.

API

1. Enhanced field components

1st-level field components:

• AutoComplete
• Cascader
• Checkbox
• DatePicker
• Input
• InputNumber
• Mentions
• Radio
• Rate
• Select
• Slider
• Switch
• TimePicker
• Transfer
• TreeSelect
• Upload

2nd-level field components, in antd is AAA.BBB, and in antx can directly import BBB:

• CheckboxGroup Checkbox.Group
• DateRange DatePicker.RangePicker
• TextArea Input.TextArea
• Search Input.Search
• Password Input.Password
• RadioGroup Radio.Group
• TimeRange TimePicker.RangePicker
• Dragger Upload.Dragger

2. Base components

Form, Button, and Item are antd original components, provided for convenience. Watch and WrapperCol are custom components.

• Form
• Button
• Item Form.Item
• Watch used to monitor the changes of form fields, which can be only partial re-render, more refined and better performance

// Watch usage example
import { Watch } from 'antx';

<Form>
  <Input label="Song" name="song" />
  <Watch name="song">
    {(song) => {
      return <div>Song: {song}</div>;
    }}
  </Watch>
</Form>;

• WrapperCol simplify the layout code, the same props as Form.Item, used when the UI needs to be aligned with the input box.

// WrapperCol usage example
import { WrapperCol } from 'antx';

<Form>
  <Input label="Song" name="song" />
  <WrapperCol>This is a hint that aligns with the input box</WrapperCol>
</Form>;

3. create tool function

• create convert existing form field components into components that support Form.Item props mix-in, easily extend existing components.

import { create } from 'antx';


// After expansion (TypeScript hints support)
const MyCustomInputPlus = create(MyCustomInput);

<Form>
  <MyCustomInputPlus label="Song" name="song" rules={['required']} />
</Form>;

4. Simplified rules

// Simplified rules usage example

<Form>
  <Input label="Song" name="song" rules={['required', 'min=0', 'max=50']} />
</Form>

Comparison

Ant Plus and Ant Design form code comparison:

Try

Welcome to try → https://github.com/nanxiaobei/ant-plus