@techvootsolutions/form-builder

A @techvootsolutions/form-builder react component. Compatible with react ^18.0.2

• Install
• Usage
• Props
• Events

Install

npm i @techvootsolutions/form-builder

import { ReactFormBuilder } from "@techvootsolutions/form-builder";

export default {
  <ReactFormBuilder />
}

Available props

Prop	Type	Default	Description
formData	Array	[]	An array containing the form data. Each item in the array represents an input element within the form. Each item can have properties like type, name, className, options, src, width, height, alt, min, max, pattern, placeholder, and required.
formClassName	String		Adds custom CSS classes to the form element, allowing for additional styling or integration with existing styling frameworks.
title	String		Specifies the title of the form. This title can be displayed at the top of the form to provide context or instructions.
titleClassName	String		Adds custom CSS classes to the form title, allowing for specific styling of the title.
submitButtonName	String		Sets the title or label for the submit button within the form. This is the text that will be displayed on the submit button.
submitButtonNameClassName	String		Adds custom CSS classes to the submit button, allowing for specific styling of the submit button.
labelClassName	String		Adds custom CSS classes to the labels associated with form inputs, allowing for specific styling of the labels.

Usage

Here's an example of basic usage:

import React from "react";
import { ReactFormBuilder } from "@techvootsolutions/form-builder";

function App() {
  const data = [
    {
      type: "text",
      name: "firstName",
      label: "firstName",
      placeholder: "Enter Your First Name",
      required: "true",
      errorMessages: "First name required",
      className: "bg-danger",
    },
  ];
  return (
    <div>
      <ReactFormBuilder
        title="Dynamic FormInput"
        titleClassName="text-uppercase"
        formData={data}
        formClassName="container"
        submitButtonName="submit Form"
        submitButtonNameClassName="btn"
        labelClassName="mb-3"
      />
    </div>
  );
}

Available props for formData

Prop	Type	required	Description
type	String	true	Specifies the type of input element. Valid values include "text," "number," "password," and other HTML input types.
name	String	true	Sets the name attribute of the input element. It is used to identify the input data when submitted in a form.
className	String	false	Adds custom CSS classes to the input element, allowing for additional styling or integration with existing styling frameworks
options	Array	false	An array of options used for input elements like select. Each option is an object with properties such as "value" and "option".
src	String	false	Specifies the source URL for input elements like images. Used in conjunction with image-related input types.
width	String	false	Sets the width of the input element. Can be specified in pixels, percentage, em, etc.
height	String	false	Sets the height of the input element. Can be specified in pixels, percentage, em, etc.
alt	String	false	Specifies alternative text for input elements like images, providing a description in case the image cannot be displayed.
min	String	false	Defines the minimum allowed value for input elements with a range, such as number or date inputs.
max	String	false	Defines the maximum allowed value for input elements with a range, such as number or date inputs.
pattern	String	false	Specifies a regular expression pattern for validation, restricting the allowed input format.
placeholder	String	false	Displays a short hint that describes the expected input for the user.
required	String	false	Indicates whether the input field must be filled out before submitting a form.

• Define Custom Components in Toolbar

const data = [
  {
    type: "text",
    name: "fname",
    label: "firstName",
    placeholder: "Enter Your First Name",
    required: "true",
    requiredMessages: "First name required",
  },
  {
    type: "select",
    options:[{ value: "1", option: "options 1" },{ value: "2", option: "Option 2" }],
    name: "select",
    label: "Select Your dropdown value",
    required: "true",
  },
  {
    type: "radio",
    options:[{ value: "R1", option: "radio 1" },{ value: "R2", option: "radio 2" }],
    name: "radio",
    label: "select radio",
    required: "true",
  },
  {
    type: "checkbox",
    options:[{ value: "Check1", option: "checkbox 1" },{ value: "Check2", option: "checkbox 2" }],
    name: "checkbox",
    label: "select checkbox",
  },
  {
    type: "image",
    name: "image",
    src: "https://www.w3schools.com/html/img_girl.jpg",
    width: "500px",
    height: "500px",
    alt: "image not found",
  },
  {
    type: "tel",
    name: "telPhone",
    label: "telPhone",
    placeholder: "99092 *****",
    pattern: "[0-9]{5}-[0-9]{5}",
  },
  {
    type: "range",
    name: "range",
    min: "0",
    max: "50",
  },
  {
    type: "color",
  },
  {
    type: "date",
  },
  {
    type: "datetime-local",
  },
  {
    type: "email",
  },

  {
    type: "file",
  },
  {
    type: "number",
  },
  {
    type: "password",
  },
];

Available Function

Function Name	Description
onFormSubmit	Callback function triggered when the form is submitted. Receives an object containing the form data values as key-value pairs.
onInputChange	Callback function triggered when an input value changes. Receives the name of the input and the new value.

Here's an example of basic Function usage:

import React from "react";
import { ReactFormBuilder } from "@techvootsolutions/form-builder";

function App() {
  const handleSubmit = (formDataValues) => {
    console.log(formDataValues);
  };
  const handleChange = (name,value) => {
    console.log(name,value);
  }
  return (
    <div>
      <ReactFormBuilder
        formData={[
           // ... your form data here
        ]}
        onFormSubmit={handleSubmit}
        onInputChange={handleChange}
      />
    </div>
  );
}