antx

---

---

Features

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

Installation

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

Usage

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

const App = () => {
  return (
    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
      <Input label="Name" name="name" rules={['required', 'string']} />
      <Select
        label="Gender"
        name="gender"
        rules={['required', 'number']}
        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)
rules in string phrase, for example rules={['required', 'max=10']} represents for rules={[{ required: true }, { max: 10 }]}.
3. Not add any new props
All props are antd original props, without add any other new props or APIs, reducing mental burden.
In addition, antx also provides 2 custom components (WrapperCol, Watch), and a tool function create.

API

1. Enhanced field components

1st-level field components:

1. AutoComplete
2. Cascader
3. Checkbox
4. DatePicker
5. Input
6. InputNumber
7. Mentions
8. Radio
9. Rate
10. Select
11. Slider
12. Switch
13. TimePicker
14. Transfer
15. TreeSelect
16. Upload

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

1. CheckboxGroup Checkbox.Group
2. DateRange DatePicker.RangePicker
3. TextArea Input.TextArea
4. Search Input.Search
5. Password Input.Password
6. RadioGroup Radio.Group
7. TimeRange TimePicker.RangePicker
8. Dragger Upload.Dragger

1. Base components

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

| Props | Description | Type | Default | | ----------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------- | | name | Field to monitor | NamePath | - | | list | List of fields to monitor (mutually exclusive with name) | NamePath[] | - | | children | Render props. Get the monitored value (or list), return UI | (next: any, prev: any, form: FormInstance) => ReactNode | - | | onlyValid | Only trigger children rendering when the monitored value is not undefined | boolean | false | | onChange | Get the monitored value (or list), handle side effects (mutually exclusive with children) | (next: any, prev: any, form: FormInstance) => void | - |

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

<Form>
  <Input label="Song" name="song" />
  <Input label="Artist" name="artist" />

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

  <Watch list={['song', 'artist']}>
    {([song, artist]) => {
      return (
        <div>
          Song: {song}, Artist: {artist}
        </div>
      );
    }}
  </Watch>
</Form>;

1. 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>;

1. 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';

// Before expansion
<Form>
  <Form.Item label="Song" name="song" rules={{ required: true }}>
    <MyCustomInput />
  </Form.Item>
</Form>;

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

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

1. Simplified rules

| Phrase | Correspondence | Description | | --------------- | -------------------------------------- | ------------ | | 'required' | { required: true } | | | 'required=xx' | { required: true, message: 'xx' } | | | 'string' | { type: 'string', whitespace: true } | | | 'pureString' | { type: 'string' } | | | 'number' | { type: 'number' } | | | 'array' | { type: 'array' } | | | 'boolean' | { type: 'boolean' } | | | 'url' | { type: 'url' } | | | 'email' | { type: 'email' } | | | 'len=20' | { len: 20 } | len === 20 | | 'max=100' | { max: 100 } | max <= 100 | | 'min=10' | { min: 10 } | min >= 10 |

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

License

MIT License (c) nanxiaobei