{"id":13835401,"url":"https://github.com/nanxiaobei/ant-plus","last_synced_at":"2025-05-15T16:05:26.996Z","repository":{"id":52890380,"uuid":"136791456","full_name":"nanxiaobei/ant-plus","owner":"nanxiaobei","description":"🪄 Ant Design Form Simplified","archived":false,"fork":false,"pushed_at":"2024-11-21T07:43:47.000Z","size":37146,"stargazers_count":282,"open_issues_count":0,"forks_count":16,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-05T10:08:34.347Z","etag":null,"topics":["ant-design","antd","form","input","react","select"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nanxiaobei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-10T08:20:08.000Z","updated_at":"2025-04-06T18:37:56.000Z","dependencies_parsed_at":"2024-04-12T11:01:46.404Z","dependency_job_id":"6768f21c-5d9a-4d29-8e4e-6d2d65b279b3","html_url":"https://github.com/nanxiaobei/ant-plus","commit_stats":{"total_commits":361,"total_committers":3,"mean_commits":"120.33333333333333","dds":"0.030470914127423865","last_synced_commit":"ae945c7a4f433969c54d2d409fd35e610e372376"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Fant-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Fant-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Fant-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Fant-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nanxiaobei","download_url":"https://codeload.github.com/nanxiaobei/ant-plus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374417,"owners_count":22060610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","form","input","react","select"],"created_at":"2024-08-04T14:01:01.189Z","updated_at":"2025-05-15T16:05:26.946Z","avatar_url":"https://github.com/nanxiaobei.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\nLink in bio to **widgets**,\nyour online **home screen**. ➫ [🔗 kee.so](https://kee.so/)\n\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"public/ant_plus_logo.svg\" alt=\"Ant Plus\" height=\"100\" /\u003e\n\nAnt Design Form Simplified, build forms in the simplest way.\n\n[![npm version](https://img.shields.io/npm/v/antx.svg?style=flat-square)](https://www.npmjs.com/package/antx)\n[![npm downloads](https://img.shields.io/npm/dt/antx.svg?style=flat-square)](http://www.npmtrends.com/antx)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/antx?style=flat-square)](https://bundlephobia.com/result?p=antx)\n[![GitHub](https://img.shields.io/github/license/nanxiaobei/ant-plus.svg?style=flat-square)](https://github.com/nanxiaobei/ant-plus/blob/main/LICENSE)\n![npm peer dependency version](https://img.shields.io/npm/dependency-version/antx/peer/react?style=flat-square)\n![npm peer dependency version](https://img.shields.io/npm/dependency-version/antx/peer/antd?style=flat-square)\n\nEnglish · [简体中文](./README.zh-CN.md)\n\n\u003c/div\u003e\n\n---\n\n## Introduction\n\n`antx` provides a set of `antd` mixed field components:\n\n**1. Say goodbye to cumbersome `\u003cForm.Item\u003e` and `rules`**  \nDirectly write on field components (e.g. `Input`) with `Form.Item` props and field props (**fully TypeScript support**), which greatly simplifies the code.\n\n**2. String `rules` (only enhanced, original `rules` are also supported)**  \n`rules` in string, for example `rules={['required', 'max=10']}` represents for `rules={[{ required: true }, { max: 10 }]}`.\n\n**3. Not adding any new props**  \nAll props are `antd` original props, without add any other new props, reducing mental burden.\n\nIn the same time, `antx` provides 2 helper components (`WrapperCol`, `Watch`), and a tool function `create()` for easily enhancing existing field components.\n\n## Installation\n\n```sh\npnpm add antx\n# or\nyarn add antx\n# or\nnpm i antx\n```\n\n## Usage\n\n```tsx\nimport { Button, Form } from 'antd';\nimport { Input, Select, WrapperCol } from 'antx';\n\nconst App = () =\u003e {\n  return (\n    \u003cForm labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}\u003e\n      \u003cInput label=\"Name\" name=\"name\" rules={['required', 'string']} /\u003e\n      \u003cSelect\n        label=\"Gender\"\n        name=\"gender\"\n        rules={['required', 'number']}\n        options={[\n          { value: 1, label: 'Male' },\n          { value: 2, label: 'Female' },\n        ]}\n      /\u003e\n      \u003cInputNumber\n        label=\"Age\"\n        name=\"age\"\n        rules={['required', 'number', 'min=0']}\n      /\u003e\n      \u003cWrapperCol\u003e\n        \u003cButton type=\"primary\" htmlType=\"submit\"\u003e\n          Submit\n        \u003c/Button\u003e\n      \u003c/WrapperCol\u003e\n    \u003c/Form\u003e\n  );\n};\n\nexport default App;\n```\n\n[![Edit antx](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antx-v4hqw?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## API\n\n### 1. Mixed components\n\n1. **AutoComplete**\n1. **Cascader**\n1. **Checkbox**\n1. **DatePicker**\n1. **Input**\n1. **InputNumber**\n1. **Mentions**\n1. **Radio**\n1. **Rate**\n1. **Select**\n1. **Slider**\n1. **Switch**\n1. **TimePicker**\n1. **Transfer**\n1. **TreeSelect**\n1. **Upload**\n1. **CheckboxGroup** `Checkbox.Group`\n1. **DateRange** `DatePicker.RangePicker`\n1. **TextArea** `Input.TextArea`\n1. **Search** `Input.Search`\n1. **Password** `Input.Password`\n1. **RadioGroup** `Radio.Group`\n1. **TimeRange** `TimePicker.RangePicker`\n1. **Dragger** `Upload.Dragger`\n\nFor all the mixed components above, props like`className`, `style`, `name`, `tooltip` will be passed to `Form.Item`.\n\nTo pass to the inner field component, please use `selfClass`, `selfStyle`, `selfName`, `selfTooltip`.\n\n### 2. Helper components\n\n1. **Watch**: used to monitor the changes of form values, which can be only partial re-render, more refined and better performance\n\n| Props       | Description                                                                                 | Type                                                      | Default |\n| ----------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------- |\n| `name`      | Field to monitor                                                                            | [`NamePath`](https:ant.designcomponentsform-cnNamePath)   | -       |\n| `list`      | List of fields to monitor (mutually exclusive with `name`)                                  | `NamePath[]`                                              | -       |\n| `children`  | Render props. Get the monitored value (or list), return UI                                  | `(next: any, prev: any, form: FormInstance) =\u003e ReactNode` | -       |\n| `onlyValid` | Only trigger `children` rendering when the monitored value is not `undefined`               | `boolean`                                                 | `false` |\n| `onChange`  | Get the monitored value (or list), handle side effects (mutually exclusive with `children`) | ` (next: any, prev: any, form: FormInstance) =\u003e void`     | -       |\n\n```tsx\n// Watch example\nimport { Watch } from 'antx';\n\n\u003cForm\u003e\n  \u003cInput label=\"Song\" name=\"song\" /\u003e\n  \u003cInput label=\"Artist\" name=\"artist\" /\u003e\n\n  \u003cWatch name=\"song\"\u003e\n    {(song) =\u003e {\n      return \u003cdiv\u003eSong: {song}\u003c/div\u003e;\n    }}\n  \u003c/Watch\u003e\n\n  \u003cWatch list={['song', 'artist']}\u003e\n    {([song, artist]) =\u003e {\n      return (\n        \u003cdiv\u003e\n          Song: {song}, Artist: {artist}\n        \u003c/div\u003e\n      );\n    }}\n  \u003c/Watch\u003e\n\u003c/Form\u003e;\n```\n\n2. **WrapperCol**: simplify the layout code, the same props as `Form.Item`, used when the UI needs to be aligned with the input box.\n\n```tsx\n// WrapperCol example\nimport { WrapperCol } from 'antx';\n\n\u003cForm\u003e\n  \u003cInput label=\"Song\" name=\"song\" /\u003e\n  \u003cWrapperCol\u003eThis is a hint that aligns with the input box\u003c/WrapperCol\u003e\n\u003c/Form\u003e;\n```\n\n### 3. `create()` function\n\n- **create()**: convert existing custom field components into components that support `Form.Item` props mix-in.\n\n```tsx\nimport { create } from 'antx';\n\n// Before\n\u003cForm\u003e\n  \u003cForm.Item label=\"Song\" name=\"song\" rules={{ required: true }}\u003e\n    \u003cMyCustomInput /\u003e\n  \u003c/Form.Item\u003e\n\u003c/Form\u003e;\n\n// enhancing with create()\nconst MyCustomInputPlus = create(MyCustomInput);\n\n// After\n\u003cForm\u003e\n  \u003cMyCustomInputPlus label=\"Song\" name=\"song\" rules={['required']} /\u003e\n\u003c/Form\u003e;\n```\n\n### 4. String `rules`\n\n| String          | Equals to                              | Description  |\n| --------------- | -------------------------------------- | ------------ |\n| `'required'`    | `{ required: true }`                   |              |\n| `'required=xx'` | `{ required: true, message: 'xx' }`    |              |\n| `'string'`      | `{ type: 'string', whitespace: true }` |              |\n| `'pureString'`  | `{ type: 'string' }`                   |              |\n| `'number'`      | `{ type: 'number' }`                   |              |\n| `'array'`       | `{ type: 'array' }`                    |              |\n| `'boolean'`     | `{ type: 'boolean' }`                  |              |\n| `'url'`         | `{ type: 'url' }`                      |              |\n| `'email'`       | `{ type: 'email' }`                    |              |\n| `'len=20'`      | `{ len: 20 }`                          | `len === 20` |\n| `'max=100'`     | `{ max: 100 }`                         | `max \u003c= 100` |\n| `'min=10'`      | `{ min: 10 }`                          | `min \u003e= 10`  |\n\n```tsx\n// String rules example\n\u003cInput label=\"Song\" name=\"song\" rules={['required', 'min=0', 'max=50']} /\u003e\n```\n\n## Comparison\n\nAnt Plus and Ant Design form code comparison:\n\n![Comparison](public/antx_vs_antd.png)\n\n## License\n\n[MIT License](https://github.com/nanxiaobei/ant-plus/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)\n","funding_links":[],"categories":["目录"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanxiaobei%2Fant-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnanxiaobei%2Fant-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanxiaobei%2Fant-plus/lists"}