react-form-renderer v0.2.0

React Form Renderer

A simple and fast library to build Forms starting from a json schema. You can use the built-in renderer of each element, or passing the UI-Kit of your own.

The library has also a validator system based on simple-react-validator

Install and Save

npm install react-form-renderer --save

Using Example

<Form
  textInputRenderer = {<input type="text" />}
  buttonRenderer = {<input type="submit" />}
  fieldRenderer = {<div />}
  containerRenderer = {<div />}
  validatorRenderer = {<div />}
  fields={[
    {
      type: 'container', //Required
      name: 'container-1', //Optional
      fields: [
        {
            type: 'container', //Required
            name: 'container-1', //Optional
            fields: [
                {
                    type: 'text', //Required
                    name: 'username', //Required
                    placeholder:'Username', //Optional
                },
                {
                    type: 'password', //Required
                    name: 'password', //Required
                    placeholder:'Password', //Optional
                }
            ]
        }
      ]
    },
    {
      type: 'container', //Required
      name: 'container-2', //Required
      className: '', //Optional
      fields: [
        {
          type: 'submit', //Required
          name: 'submit', //Required
          placeholder:'Login', //Optional
        }
      ]
    } 
  ]}

  onSubmit = {() => console.log('onSubmit')}
    
  validatorTypes={{
    username: 'required',
    password: 'required|password'
  }}

  validatorMessages={{
    username: {
      required: 'This is a custom message for mandatory fields'
    },
    password: {
      required: 'This is a custom message for mandatory fields',
      password: 'This is a custom message for wrong validation error'
    }
  }}
/>

Class Properties

To initialize a Form Renderer component, you need to define these properties

##Item Renderers

You can also define a custom renderer for each single component, instead of using the default renderers.

Here is the list of the customizable components:

Each renderer can be defined with your own properties, they will added to the item renderer as well.

Field Properties

Eeach field comes up with these properties | Property | Options | Description | |-----------------|---------------|----------------------------------------------------------| |type | required | Used for rendering simple Text Fields | |name | required | Used for rendering simple Text Fields | |placeholder | optional | Used for rendering simple Text Fields | |style | optional | Used for rendering simple Text Fields | |className | optional | Used for rendering simple Text Fields |

Validation Rules

This is the list of all the rules you can validate form inputs against. When using multiple rules, separate them with a pipe |. When adding options, append a colon to the rule and separate options with commas.

Examples: 'required|min:20|max:120' and 'required|in:stu,stuart,stuyam'

Custom Rules

You can write custom rules that you can use the validate. A rule is comprised of 3 parts; the name, the message, and the rule itself.

Custom Error Messages

The fifth parameter is an object. The keys correspond to the rule names. If you use the key 'default' then that will be used for all errors that do not have custom errors set.

Buttons out of the box

Maybe you need to put your own buttons anywhere in your layout, so you don't really want to render a button inside the Form, just to access to the actions.

We exposed simple functions to achieve this, using ref param.

The first thing you need to do is to put a property ref = "formName" in your form renderer. Then, you can call directly the submitAction() calling this.refs.form.submitAction();