react-dj-forms-builder

Forms Builder

Author: Daniel da Silva Jegorschki Santos (https://github.com/dsjsantos)
Date: August 2020
Description: A JSON based forms builder react component that renders and control a web form based on JSON configuration file.

Installation

npm install --save react-dj-forms-builder

Documentation

See component full documentation in Documentation.md file.

Usage

Import component into your react project:

import FormBuilder from 'react-dj-forms-builder';

Use it wherever you need the form redered:

<FormBuilder {...props} />

Remember that 'config' and 'onChange' properties are required. See full documentation for further information.

Demo

This project includes a demonstration application under usage_demo folder. Clone or dowload the project, go into 'usage_demo' folder and run:

npm install

PUBLIC_URL=. npm start

Styles

The required component style sheet is automatically included and there is no need for additional style import. You may customize specific appearence in you application style sheet to fits your needs.

Code example

The following code shows a simple component usage. First we have a CSS file 'formDemo.css' for a simple customization and a 'fileDemo.js' wich is the demo itself that includes de CSS file.

File: formDemo.css

body {
    margin: 0;
    padding: 1em;
}

.group-card {
    background-color: #ddd;
    padding: 0.75em 1em;
}

.group-card.login-title ._djfb_grid-group-title {
    font-weight: bold;
    margin: -1em -1em 0 -1em;
    padding: 0.5em 1em;
    color: white;
    background-color: darkorange;
}

.group-card ._djfb_grid-group-content {
    margin-top: 0.5em;
}

File: formDemo.js

import React, { useState } from "react";
import FormBuilder from 'react-dj-forms-builder';

import './formDemo.css';


const formLogin = {
    "pages": [
        {
            "groups": [
                {
                    "rowType": "fullwidth",
                    "className": "group-card login-title",
                    "title": "Login:",
                    "description": null,
                    "requiredMarkTitle": true,
                    "fields": {
                        "username": {
                            "type": "input",
                            "className": "username-field",
                            "label": "Username:",
                            "placeHolder": "Enter your username",
                            "requiredMark": false,
                            "regExInput": "^[a-zA-Z0-9]{1,32}$"
                        },
                        "passphrase": {
                            "type": "input",
                            "className": "passphrase-field",
                            "label": "Password:",
                            "placeHolder": "Enter your password",
                            "isPasswordInput": true,
                            "requiredMark": false
                        }
                    }
                }
            ]
        }
    ]
};

const FormDemo = () => {
    const [ fields, setFields ] = useState(null);

    const _handleFormUpdate = (newFields) => {
        setFields(newFields);
    }

    return(
        <>
            <h1>Exemplo Forms Builder</h1>

            <FormBuilder
                id={"mainFormId"}
                name="mainForm"
                config={formLogin}
                rootAsForm={true}
                fields={null}
                page={0}
                className="main-form"
                onChange={_handleFormUpdate} 
            />

            <button 
                type="button" 
                style={{ marginTop: '2em'}} 
                onClick={() => console.log("Fields:", fields)}>
                Show form current state
            </button>            
        </>
    );
}
export default FormDemo;

Developing

Clone/fork the repository

npm install
npm run build

Changelogs

v1.2.1 (September 12, 2024)

Added

• Add component and functions types and definitions

Changes

• Update dependencies versions

v1.2.0 (December 09, 2022)

Added

• Add optional extra parameters to 'onChange' call to be used with custom components

v1.1.2 (November 23, 2022)

Added

• New component properties 'blockFieldUpdate' and 'disableClearErrorOnFieldChange'

Fixed

• Change internal fields state changes cheking

v1.1.1 (November 22, 2022)

Fixed

• "none" field type now renders its children correctly

v1.1.0 (November 21, 2022)

• First published version of the component

v1.0.0 (August 7, 2020)

• First component version (personal use only)

License

Apache License v2.0