Js-form-builder NPM

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'),
);