Repository files navigation

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

English ·简体中文

antx provides a set ofantd mixed field components:

1. Say goodbye to cumbersome<Form.Item> andrules
Directly write on field components (e.g.Input) withForm.Item props and field props (fully TypeScript support), which greatly simplifies the code.

2. Stringrules (only enhanced, originalrules are also supported)
rules in string, for examplerules={['required', 'max=10']} represents forrules={[{ required: true }, { max: 10 }]}.

3. Not adding any new props
All props areantd original props, without add any other new props, reducing mental burden.

In the same time,antx provides 2 helper components (WrapperCol,Watch), and a tool functioncreate() for easily enhancing existing field components.

Ant Plus and Ant Design form code comparison:

pnpm add antx# oryarn add antx# ornpm i antx

import{Button,Form}from'antd';import{Input,Select,WrapperCol}from'antx';constApp=()=>{return(<FormlabelCol={{span:8}}wrapperCol={{span:16}}><Inputlabel="Name"name="name"rules={['required','string']}/><Selectlabel="Gender"name="gender"rules={['required','number']}options={[{value:1,label:'Male'},{value:2,label:'Female'},]}/><InputNumberlabel="Age"name="age"rules={['required','number','min=0']}/><WrapperCol><Buttontype="primary"htmlType="submit">          Submit</Button></WrapperCol></Form>);};exportdefaultApp;

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
17. CheckboxGroup －－－ (Checkbox.Group)
18. DateRange －－－ (DatePicker.RangePicker)
19. TextArea －－－ (Input.TextArea)
20. Search －－－ (Input.Search)
21. Password －－－ (Input.Password)
22. RadioGroup －－－ (Radio.Group)
23. TimeRange －－－ (TimePicker.RangePicker)
24. Dragger －－－ (Upload.Dragger)

For all the mixed components above,classNamestylenametooltip props will be passed toForm.Item.

To pass to the inner field component (likeInput), please useselfClassselfStyleselfNameselfTooltip.

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

// Watch exampleimport{Watch}from'antx';<Form><Inputlabel="Song"name="song"/><Inputlabel="Artist"name="artist"/><Watchname="song">{(song)=>{return<div>Song:{song}</div>;}}</Watch><Watchlist={['song','artist']}>{([song,artist])=>{return(<div>          Song:{song}, Artist:{artist}</div>);}}</Watch></Form>;

2. WrapperCol: simplify the layout code, the same props asForm.Item, used when the UI needs to be aligned with the input box.

// WrapperCol exampleimport{WrapperCol}from'antx';<Form><Inputlabel="Song"name="song"/><WrapperCol>This is a hint that aligns with the input box</WrapperCol></Form>;

• create(): convert existing custom field components into components that supportForm.Item props mix-in.

import{create}from'antx';// Before<Form><Form.Itemlabel="Song"name="song"rules={{required:true}}><MyCustomInput/></Form.Item></Form>;// enhancing with create()constMyCustomInputPlus=create(MyCustomInput);// After<Form><MyCustomInputPluslabel="Song"name="song"rules={['required']}/></Form>;

// String rules example<Inputlabel="Song"name="song"rules={['required','min=0','max=50']}/>

MIT License (c)nanxiaobei