Form-pro NPM | npm.io

English | 简体中文

FormPro

Generate forms with configuration, No need to use import cumbersome form controls.
Use the React.lazy API to support loading most of the Ant Design data input components on demand.
Flexible design, support for custom, preset form controls.
Written in TypeScript with complete defined types.

Live demo

When To Use

Can completely replace Ant Design's Form component, dealing with complex forms, pop-up windows, etc.

How To Use

Installation

We recommend using npm or yarn to install.

$ npm install form-pro --save 
# or
$ yarn add form-pro --save

If you are in a bad network environment, you can try other registries and tools like cnpm.

Usage

import FormPro from 'form-pro'
import 'form-pro/lib/style'  // If the development environment supports Less
// If the development environment does not support Less, please use
// import 'form-pro/lib/style/index.css'

<FormPro
  columns={[
    {
      type: 'Input',
      name: 'name'
    },
    {
      type: 'DatePicker',
      name: 'birthday'
    }
  ]}
/>

Examples

Environment Support

React version is greater than 16.6.

API

FormPro

Property	Description	Type	Default
columns	Columns of table	ColumnProps []	-
formProps	Consistent with the Ant Design Form configuration	FormProps	-
onChange	Triggered when the form value changes	(allValues, changedValues) => void	-
onSubmit	Triggered when the submit button is clicked	(values) => void	-
showSubmit	Whether to show the submit button	boolean	`true`
submitText	Submit button text	React.ReactNode	`Submit`
footer	Bottom of the form	React.ReactNode	-
loading	Loading when all form controls are loaded	React.ReactNode	-

Column

Form control configuration data object, which is an item in columns, Column uses the same API.

Property	Description	Type	Default
type	Form control type	string	-
render	Custom form controls, when used with the `type` field, use `render` first.	React.ReactNode	-
name	Field name within the form field	string	-
options	Consistent with the options parameter of getFieldDecorator(id, options)	object	-
extraProps	Additional custom parameters for form controls, different control parameters, corresponding to `type`	object	-
formItemProps	The parameters of the form control, different control parameters, corresponding to `type`	object	-
loading	Loading when the current form control loads	React.ReactNode	-

FormPro.create(options)

Use the FormPro.create function to create a new FormPro component. The new FormPro component built in type will be determined by options.

Property	Description	Type	Default
type	Form control type	string	-
component	The component corresponding to the form control	any	-
formItemRender	Custom rendering of FormItem	(itemOptions: any, Component: any) => JSX.Element	-

Create a FormPro component with a built-in Checkbox type.

const NewFormPro = create([{
    type: 'Checkbox',
    component: React.lazy(() => import('antd/lib/checkbox')),
}])  

...

<NewFormPro columns={[type: 'Checkbox', name: 'checkbox']} />