Link in bio to widgets, your online home screen. โซ ๐ kee.so
antx
provides a set of antd
mixed field components:
1. Say goodbye to cumbersome <Form.Item>
and rules
Directly write on field components (e.g. Input
) with Form.Item
props and field props (fully TypeScript support), which greatly simplifies the code.
2. String rules
(only enhanced, original rules
are also supported)
rules
in string, for example rules={['required', 'max=10']}
represents for rules={[{ required: true }, { max: 10 }]}
.
3. Not adding any new props
All props are antd
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 function create()
for easily enhancing existing field components.
pnpm add antx
# or
yarn add antx
# or
npm i antx
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;
- AutoComplete
- Cascader
- Checkbox
- DatePicker
- Input
- InputNumber
- Mentions
- Radio
- Rate
- Select
- Slider
- Switch
- TimePicker
- Transfer
- TreeSelect
- Upload
- CheckboxGroup
Checkbox.Group
- DateRange
DatePicker.RangePicker
- TextArea
Input.TextArea
- Search
Input.Search
- Password
Input.Password
- RadioGroup
Radio.Group
- TimeRange
TimePicker.RangePicker
- Dragger
Upload.Dragger
For all the mixed components above, props likeclassName
, style
, name
, tooltip
will be passed to Form.Item
.
To pass to the inner field component, please use selfClass
, selfStyle
, selfName
, selfTooltip
.
- Watch: used to monitor the changes of form values, 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 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>;
- WrapperCol: simplify the layout code, the same props as
Form.Item
, used when the UI needs to be aligned with the input box.
// WrapperCol example
import { WrapperCol } from 'antx';
<Form>
<Input label="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 support
Form.Item
props mix-in.
import { create } from 'antx';
// Before
<Form>
<Form.Item label="Song" name="song" rules={{ required: true }}>
<MyCustomInput />
</Form.Item>
</Form>;
// enhancing with create()
const MyCustomInputPlus = create(MyCustomInput);
// After
<Form>
<MyCustomInputPlus label="Song" name="song" rules={['required']} />
</Form>;
String | Equals to | 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 |
// String rules example
<Input label="Song" name="song" rules={['required', 'min=0', 'max=50']} />
Ant Plus and Ant Design form code comparison: