1.0.2 • Published 1 year ago
form-builder-vr v1.0.2
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"