js-form-builder

Component form builder

Requirements

• Node version >= 6.2

See a demo

https://df4iw.csb.app/

See how works

https://codesandbox.io/s/js-form-builder-df4iw?file=/src/index.js

Props

Prop name	Required	Default value	Prop value type	Description
fields (See doc)	-	[]	Array	List of all fields for the form
form	-	{}	Object	Form configuration to submit fields (Action, Method, enctype)
container	-	null	Jsx	Wrapper container for all form
fieldGroupContainer	-	null	Jsx	Wrapper to group of fields Each block of field will renderen into this container
fieldContainer	-	null	Jsx	Wrapper for each field.
formErrorContainer	-	null	Jsx	Wrapper for form error message
hasToSubmit	-	true	Boolean	If submit button should submit form. If this prop is false on submit button just will return a json with all fields values. (Only if all fields are valid)
showSubmitButton	-	true	Boolean	If form has to render a button to submit.
showFormErrorMessage	-	true	Boolean	If form has to render a error message on click submit.
showFieldsErrorsOnFailSubmit	-	true	Boolean	If form has to show each field with error on fail submit.
onSuccess	-	Empty function	Function	Called on click submit and all fields are valid
onError	-	Empty function	Function	Called on submit form with errors. Returns object with field name and error message

Usage

import React from 'react';
import ReactDOM from 'react-dom';
 
import FormBuilder from 'js-form-builder';
 
 
const displayOnChangeFieldValue = (event) => {
    console.log(event.target.value);
};
 
const form = {
    action: '.',
    method: 'POST',
};
 
const fields = [
    {
        id: 'name',
        name: 'name',
        type: 'text',
        className: 'class_name',
        required: true,
        onChange: displayOnChangeFieldValue,
    }, {
        id: 'lastName',
        name: 'lastName',
        type: 'text',
        className: 'class_name',
        required: true,
        onChange: displayOnChangeFieldValue,
    },
];
/**
* Render form into a custom html block.
*/
const Container = ({ children, onSubmit }) => (
    <div className="container-form">
        {children}
 
        <button onClick={onSubmit}>Custom submit form</button>
    </div>
);
 
/**
* Render fields group into a custom html block.
*/
const fieldGroupContainer = ({ children, label }) => (
    <div className="form-group">
        {label}
        {children}
    </div>
);
 
/**
* Render field into a custom html block.
*/
const fieldContainer = ({ children, label }) => (
    <div className="form-control">
        {label}
        {children}
    </div>
);
 
 
/**
* Render label field into a custom html block.
*/
const labelContainer = ({ children }) => (
    <label className="label">
        {children}
    </label>
);
 
/**
* Render fields error message into a custom html block.
*/
const formErrorContainer = ({ children }) => (
    <div className="error">
        {children}
    </div>
);
 
/**
* Called on submit button.
* Return all fields data as json
*/
function onCustomSubmit(formData) {
    console.log(formData);
}
 
 
ReactDOM.render(
 <FormBuilder
        form={form}
        fields={fields}
        container={Container}
        fieldContainer={fieldContainer}
        fieldGroupContainer={fieldGroupContainer}
        labelContainer={labelContainer}
        formErrorContainer={formErrorContainer}
        onSubmit={onCustomSubmit}
        hasToSubmit={true}
        showSubmitButton={false}
        hasToShowLabel={true}
        showFormErrorMessage={true}
        showFieldsErrorsOnFailSubmit={true}
    />,
    document.getElementById('form'),
);
 

How to collaborate

• Clone the project git clone https://github.com/jojo5716/form-builder-js

cd form-builder-js/

• Install dependencies

npm ci

• Start the development. This will command will start the development server builds, automatic testing and linting.

npm start

• Open http://localhost:8080/ in a browser.