Neptunian Parity Mnemonic

    @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.

    Install

    npm i @rogeroliveira84/react-dynamic-forms

    DownloadsWeekly Downloads

    1

    Version

    0.5.4

    License

    MIT

    Unpacked Size

    88.1 kB

    Total Files

    30

    Last publish

    Collaborators

    • rogeroliveira84