@rogeroliveira84/react-dynamic-forms

0.5.4 • Public • Published

ReactDynamicForms.js

GitHub license Build Status CircleCI Status npm version GitHub contributors npm

A react component to create dynamic forms based on a config.json

Demo online react-dynamic-forms on heroku

Install

npm install --save @rogeroliveira84/react-dynamic-forms

How to use

  • Use the react component call below:

howToUse

  • The "configData" is a javaScript object that defines the form fields to be dynamically created:
const configData = {
    "name": "Client Register",
    "fields": [
        {
            "id": "fullname",
            "label": "Full Name",
            "description": "The full name of the client",
            "type": "text",
            "value": "",
            "required": "true",
            "placeholder": "Type your full name...",
            "definition": {
                "maxlength": "5"
            },
            "defaultValue": ""
        },
        {
            "id": "dateOfBirth",
            "label": "Date Of Birth",
            "description": "",
            "type": "date",
            "value": "",
            "required": "false",
            "placeholder": "",
            "defaultValue": ""
        },
        {
            "id": "favorityFruits",
            "label": "Favorite Fruits",
            "description": "",
            "type": "array",
            "value": "",
            "required": "false",
            "placeholder": "",
            "definition": {
                "options": [
                    {
                        "id": 1,
                        "display": "Apple"
                    },
                    {
                        "id": 2,
                        "display": "Banana"
                    },
                    {
                        "id": 3,
                        "display": "Watermelon"
                    }
                ]
            },
            "defaultValue": ""
        }
    ]
}

Rendered Form

renderedForm

Output JSON

{
    "timeStamp": 1551747768847,
    "data": [
        {
            "name": "fullname",
            "value": "My name"
        },
        {
            "name": "dateOfBirth",
            "value": "1980-01-01"
        },
        {
            "name": "favorityFruits",
            "value": "1"
        }
    ]
}

Roadmap

Version 0.4.0

  • 1.1 - Define the dynamic-form-config: able to mount the forms from it
  • 1.2 - Add form
  • 1.3 - Add caption and description to the inputs
  • 1.4 - Add input component types: text, number
  • 1.5 - Add onSubmit method prop
  • 1.6 - Add input component types: date (html5), datetime (html5), time (html5)
  • 1.7 - Add styles to the component

Version 0.5.0

  • 2.1 - Add dropbox component
  • 2.2 - Add more options to the inputs: required, placeholder

Version 0.6.0

  • 3.1 - Add dynamic table type
  • 3.2 - Add CRUD to values of table type

License

ReactDynamicForms is MIT licensed.

Dependents (0)

Package Sidebar

Install

npm i @rogeroliveira84/react-dynamic-forms

Weekly Downloads

0

Version

0.5.4

License

MIT

Unpacked Size

88.1 kB

Total Files

30

Last publish

Collaborators

  • rogeroliveira84