antx

Ant Design Form Simplified

  • antx

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
antx
5.5.04 months ago6 years agoMinified + gzip package size for antx in KB

Readme

kee.so


Create now ➫ 🔗 kee.so


Ant Plus
Ant Design Form Simplified, build forms in the simplest way.
npm version npm downloads npm bundle size GitHub npm peer dependency version npm peer dependency version
English · 简体中文

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;

Edit antx

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

License

MIT License (c) nanxiaobei