redux-form-auto

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:

• Bootstrap 3
• Bootstrap 4
• Antd

More skins will be added. Join me!

Project status

This is more or less abandonware. I will probably update for security concerns. Anyway, if you have a need, try to open an issue. If it's easy I may do it. And of course, PRs are welcome.

Play with a demo

• Bootstrap 3
• Bootstrap 4
• Antd

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.

Installation

Choose the skin and import the corresponding package

$ npm install redux-form-auto-bootstrap3 --save

Current skins:

• redux-form-auto-bootstrap3
• redux-form-auto-bootstrap4
• redux-form-auto-antd

Usage

1. Write schema

Write a schema for each model you have:

1    import { Schema } from 'redux-form-auto-bootstrap3'
2    // ... or ...
3    import { Schema } from 'redux-form-auto-bootstrap4'
4    // ... or ...
5    import { Schema } from 'redux-form-auto-antd'
6
7    export const client = new Schema('client', {
8      name: {
9        type: 'string',
10        required: true,
11        max: 32
12      },
13      age: {
14        type: 'number'
15      }
16    })

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:

1    import { Autoform } from 'redux-from-auto-<skin>'
2    import { client } from './models/client'
3
4    const MyForm = ({ onSubmit }) =>
5      <Autoform
6        schema={client}
7        onSubmit={onSubmit}
8      />

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:

1    import { Schema } from 'redux-form-auto-<skin>'
2    import { client } from './client'
3
4    export const company = new Schema('company', {
5      clients: {
6        type: [client],
7        minChildren: 10
8      }
9    })

Read the documentation to find out what else you can do:

Documentation

You can also take the demo project as an example of use.

Rationale

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.

• More DRY
• More SSoT
• ...so less bugs

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

Help wanted

Let's have some fun automatizing the hell out of every UI library out there. Join me!