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!