zixiCat / form-bunch

Form-bunch is a component like plugin that make it easier to write form, you could add the most of components what you want to form-bunch for build various form.

form-bunch

Form-bunch is a component like plugin that make it easier to write form.
You could add the most of components what you want to form-bunch for build various form.
You could also easily change the settings to get the verification or layout you want.
Hope you enjoy it, and if you like it, star it pllllllllllz. :)

Advantages:

• Customizable. You can add whatever you want if it's possible, like components of Material-UI, Ant Design or customized components.
• Small. it will give you performance and convenience for building form.
• Easy. You can change the settings easily - see below

DEMO

Installation

• YARN

yarn add form-bunch

• NPM

npm install form-bunch

Usage

First of all, initialize form-bunch.
Assume that you would like to use components of antd, the components should match two rules:
1. it has two fields —— value, onChange
2. the param(e) of onChange(e) => void must be corresponding to value.
if one component has no value or onChange key, or it doesn't match form-bunch, you should replace them like following.

// index.tsx 
import { DatePicker, Input, Switch } from 'antd';

const extensions = {
  datePick: DatePicker,
  input: [
    Input,
    {
      // change the `e.target.value` to `value`
      // assume that original filed `onChange` is `onSelect`, 
      // then it should be `onChange: ['onSelect', 'e.target.value']`
      onChange: ['onChange', 'e.target.value'],
    },
  ],
  switch: [
    Switch,
    {
      // change the field `checked` to `value`
      value: 'checked'
    }
  ]
};

export type TExtensions = typeof extensions;

const MyFormBunch = formBunchInit<TExtensions>(extensions);

export default MyFormBunch;

And then, set style after verification failed in form-bunch-error-box className, then import it.

/* index.css */
.form-bunch-error-box .ant-input {
    border: 1px solid red;
    box-shadow: none
}

.form-bunch-error-box .ant-input:hover {
    border: 1px solid red;
}

.form-bunch-error-box .ant-input:active {
    border: 1px solid red;
}

// index.tsx
import './index.css'

...

export default MyFormBunch;

Finally, config form-bunch, and there are many apis for usage.

<MyFormBunch
  ref={formBunchRef}
  value={value}
  items={[
    {
      key: 'a',
      type: 'input',
    },
    {
      labelCol: '80px',
      offset: '40px',
      key: 'b',
      defaultValue: 'test',
      type: 'input',
      verify: (value) => value.length > 5,
    },
  ]}
  onChange={(value) => {
    setValue(value);
  }}
/>

Click DEMO for more details about usage.

API

Form

Property	Description	Type	Default
items	config of each form item， see Items API for more details	IFormItem	-
onChange	the callback function when form data changes	(form: IFormValue, item: any, key: string) => void	-
setting	global setting of form, Priority: items > setting， see Setting API for more details	IFormSetting	-
value	form data	IFormValue	-

Items

Property	Description	Type	Default
className	class of the formItem	string	-
col	like flex-basic, the space that formItem takes up	number | string	'100%'
controlCol	like flex-basic, the space that control of formItem takes up	number | string	'80%'
defaultValue	default value, you can also change initial value of form API to set it	any	-
error	the message after verification fails	string	-
key	property of formItem	string	-
label	label of formItem	string	-
labelAlign	type of label alignment	'left' | 'right' | 'center'	'right'
labelCol	like flex-basic, the space that label of formItem takes up	number | string	20%
offset	like margin-left, the space offset from the left	number | string	0
render	render type of formItem control, require that only one is provided between property [type] and [render]	(value: any, setValue: (state: any) => void) => JSX.Element	-
required	set formItem value to be required	boolean	false
type	render type of formItem control, require that only one is provided between property [type] and [render]	string	-
typeProps	when use [type], then [typeProps] is its original props	object	-
verify	function that to verify the formItem value, it supports regex. when it return string, the string will replace corresponding error tip	RegExp | ((value?: any, form?: IFormValue) => boolean | string)	-

Setting

Property	Description	Type	Default
col	like flex-basic, the space that formItem takes up	number | string	'100%
controlCol	like flex-basic, the space that control of formItem takes up	number | string	'80%'
hasTips	determine if there is space left for error tips	boolean	false
labelAlign	type of label alignment	"left" | "right" | "center"	'right'
labelCol	like flex-basic, the space that label of formItem takes up	number | string	'20%'
offset	like margin-left, the space offset from the left	number | string	0

Ref

Property	Description	Type	Default
validate	validate all values of form and return result	() => boolean	-
reset	reset all value of form and result of verify	() => void	-

Bug tracker

If you find a bug, please report it here on Github!