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

Items

Setting

Ref

Bug tracker

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