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

Property	Options	Description
fields	required	An Array of Json Object containing the structure of your form. Each element of the Array is a different container (like rows), with the defined fields as childs.
validatorTypes	optional	A Json Object describing the type of validation for each field. See description above.
validatorMessages	optional	A Json Object containing the matching custom message for each validation error.
onSubmit	required	The function called to submit the form into your specifical process.

##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:

Component	Options	Description
textInputRenderer		Used for rendering simple Text Fields
passwordRenderer		Used for rendering a Password Field.
buttonRenderer		Used for rendering a simple Button
submitRenderer		Used for rendering the Submit Button of the Form
containerRenderer		This renderer is used for styling purposes. If you need to put two or more fields on the same row, you can wrap into the same Container Renderer and give it the appropriate style or classname
fieldRenderer		As for the Container Renderer, specially if you have to show a field and a validator string togheter, with this renderer you can apply your own style.
validatorRenderer		Used for rendering the validator error message

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'

Rules	Options	Description
accepted		If 'true', good for required check boxes.
alpha		Must have only letters.
alpha_num		Must have only letters and numbers.
alpha_num_dash		Must have only letters, numbers, dashes, and underscores.
card_exp		Must have only a valid credit card expiration date.
card_num		Must have only a valid credit card number.
email		Must have only a valid email address.
gt	30	Must be greater than value.
gte	25.39	Must be greater than or equal to value.
in	stu, chris, hi	Must be one of the provided options.
integer		Must have only an integer.
lt	193.3	Must be less than value.
lte	55	Must be less than or equal to value.
max	120	Must have less than X number of character.
min	40	Must have more than X number of characters.
not_in	john, max	Must not be one of the provided options.
phone		Must be a valid phone number.
required		Must be present, use with other rules to require them.
url		Must be a valid url.

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();