This library allows your React application to automatically generate forms and validation code using ReduxForm for state management. The form and validations are generated following a schema inspired by SimpleSchema.
At the moment the skins available are:
More skins will be added. Join me!
Play with a demo
Migration from 1.0.x
The library doesn't include bootstrap 3 styles by default any more. If you want to use bootstrap 3 skin you have to include its npm, see installation.
Choose the skin and import the corresponding package
$ npm install redux-form-auto-bootstrap3 --save
1. Write schema
Write a schema for each model you have:
// ... or ...// ... or ...const client = 'client'name:type: 'string'required: truemax: 32age:type: 'number'
Here we are saying that a
client is required to have a name and providing its allowed length. Also client has age and it's a number.
Here you can find the complete list of types and validators available.
2. Render a form
<Autoform /> React component will generate connected inputs including translatable label, proper input types and error/warning messages:
const MyForm =<Autoformschema=clientonSubmit=onSubmit/>
Form will be validated following the rules set in the schema, beginning with the type itself.
It also allows you to build arrays from other schemas as ReduxForm's FieldArray. You just toss an array with another schema from elsewhere as first element and
Autoform will allow you to add and remove elements:
const company = 'company'clients:type: clientminChildren: 10
Read the documentation to find out what else you can do:
You can also take the demo project as an example of use.
One of the purposes of the library is to avoid repeating code by not having to write a set of input components for every entity. Also when time is of the essence, writing forms can be exasperating.
These are some of the advantages of using an automatic form system.
Also redux-form-auto has some of its own
- Validation is also automatic
- Includes a translation system
- It's easily expandable
- It's simple
- When possible tries to use convention over configuration
Let's have some fun automatizing the hell out of every UI library out there. Join me!