Form-Builder

A Form Wrapper Component for React Applications.

What's this all About ?

A form component which takes a config as a prop for all the input fields required for your form, controls their value and error fields and operate on something once the field input is changed or the form is submitted

Install

With npm:

npm install --save form-builder-vr

or with yarn:

yarn add form-builder-vr

Props

| Prop | Type | Description | Default | Required | | -------- | ------ | --------------------------------- | ------- | -------- | | config | object | All form fields required (object) | null | Required |

Usage

Here is a basic usage:

import React from "react";
import Form from "form-builder";

const FORM_CONFIG = {
  onSubmit: (values, callback) => {
    console.log("submit");
    callback();
    //--do something with values and then use callback--//
  },
  wrapperClass: "dd",
  id: "contact-form",
  title: { text: "Form", class: "ll" },
  submitBtn: {
    id: "submit-form-btn-id",
    content: "Submit",
    class: "sub"
  },
  fields: {
    firstName: {
      type: "text",
      id: "firstName",
      initValue: "vishal",
      label: "First Name",
      placeholder: "",
      classes: {
        wrapperClass: "a",
        inputClass: "b",
        errorClass: "c"
      },
      validations: [
        "req",
        {
          type: "req",
          msg: "required field",
          args: []
        }
      ],
      onBlur: e => {},
      onFocus: e => {},
      onChange: (id, value, e) => {
        console.log("in onChange func");
      }
    },
    vehicle: {
      id: "vehicle",
      type: "checkbox-group",
      initValue: {},
      classes: {
        wrapperClass: "k",
        errorClass: "k"
      },
      onChange: (id, value, e) => {
        console.log({ target: e.target });
      },
      options: [
        {
          id: "car",
          label: "Car",
          classes: {
            wrapperClass: "k",
            inputClass: "l",
            errorClass: "k"
          }
        },
        {
          id: "bike",
          label: "Bike",
          classes: {
            wrapperClass: "k",
            inputClass: "l",
            errorClass: "k"
          }
        }
      ]
    },
    gender: {
      id: "gender",
      label: "Select Gender",
      type: "radio",
      initValue: "",
      classes: {
        wrapperClass: "k",
        errorClass: "k"
      },
      onChange: (id, value, e) => {
        console.log({ target: e.target });
      },
      validations: ["req"],
      options: [
        {
          id: "male",
          label: "Male",
          classes: {
            wrapperClass: "k",
            inputClass: "l"
          },
          style: { backgroundColor: "red", height: "50px" }
        },
        {
          id: "female",
          label: "Female",
          classes: {
            wrapperClass: "k",
            inputClass: "l"
          }
        }
      ]
    },
    maritalStatus: {
      type: "select",
      id: "maritalStatus",
      label: "Marital Status ",
      placeholder: "Select Your Gender",
      initValue: "",
      classes: {
        wrapperClass: "k",
        inputClass: "l",
        errorClass: "k"
      },
      options: [
        { name: "Single", value: "single", className: "hek" },
        { name: "Married", value: "married" }
      ],
      onChange: (id, value, e) => {}
    },
};

const Example = () => (
  <div className="container">
    <Form config={FORM_CONFIG} />
  </div>
);

Versions required

node version : >=10 react: "^16.0.0"

Contributors ✨

Vishal Rathore

Gash