Tarento-react-form-generator NPM

tarento-react-form-generator

Form builder library

Install

npm install --save tarento-react-form-generator

Usage

import React, { Component } from 'react'

import { FormGenerator } from 'tarento-react-form-generator'
import 'tarento-react-form-generator/dist/index.css'

class Example extends Component {
  render() {
    return <FormGenerator formData={jsonData} />
  }
}

Sample Json Data

{
  "formId": "my-form",
  "title": "Sample Form",
  "fields": [
    {
      "name": "Name",
      "fieldType": "text",
      "values": [],
      "order": 1,
      "isRequired": true,
      "width": 6
    },
    {
      "name": "Email",
      "fieldType": "email",
      "values": [],
      "order": 2,
      "isRequired": true,
      "width": 6
    },
    {
      "name": "Mobile",
      "fieldType": "numeric",
      "values": [],
      "order": 3,
      "isRequired": true,
      "width": 6
    },
    {
      "name": "Address",
      "fieldType": "textarea",
      "values": [],
      "order": 4,
      "isRequired": true,
      "width": 6
    },
    {
      "name": "separator",
      "fieldType": "separator",
      "values": [],
      "order": 5,
      "isRequired": false
    },
    {
      "name": "heading",
      "fieldType": "heading",
      "values": [
        {
          "heading": "Other Information",
          "subHeading": "Please fill other information"
        }
      ],
      "order": 6,
      "isRequired": false
    },
    {
      "name": "Gender",
      "fieldType": "radio",
      "values": [
        {
          "value": "Male",
          "key": "Male"
        },
        {
          "value": "Female",
          "key": "Female"
        }
      ],
      "order": 7,
      "isRequired": false
    },
    {
      "name": "DOB",
      "fieldType": "date",
      "values": [],
      "order": 8,
      "isRequired": false,
      "width": 2.0
    },
    {
      "name": "Willing to work in:",
      "fieldType": "checkbox",
      "values": [
        {
          "value": "Bangalore",
          "key": "Bangalore"
        },
        {
          "value": "Delhi",
          "key": "Delhi"
        }
      ],
      "order": 9,
      "isRequired": false
    },
    {
      "name": "Current Location",
      "fieldType": "dropdown",
      "values": [
        {
          "value": "Bangalore",
          "key": "Bangalore"
        },
        {
          "value": "Chennai",
          "key": "Chennai"
        },
        {
          "value": "Delhi",
          "key": "Delhi"
        },
        {
          "value": "Hyderabad",
          "key": "Hyderabad"
        }
      ],
      "order": 10,
      "isRequired": false
    },
    {
      "name": "Rate your Skills",
      "fieldType": "rating",
      "values": [],
      "order": 11,
      "isRequired": false
    },
    {
      "name": "Share your profile with others:",
      "fieldType": "boolean",
      "values": [],
      "order": 12,
      "isRequired": false
    }
  ]
}

Fields Description

Property	Type	Description
formId	String	That would serve as form id
title	String	That would be the form title
field.name	String	Label of the field
field.fieldType	String	Type of the field
field.values	Array	Options of the field
field.order	Integer	NA
field.isRequired	Boolean	Whether required or not