bitcko-react-form

React form builder, easy way to build a form and submit your data by creating a configuration json.

use npm to install this package:

npm i bitcko-react-form

You can configure your form by adding your custom css classes, ids, and validation properties as the following example. note: import bootstrap 4 css file to your project to load the bootstrap form style used in this example.

Exapmle:

import React, { Component } from 'react';

import ReactForm from "bitcko-react-form";

class App extends Component {

    onSubmitFormHandler = (formData)=>{
      this.ReactForm.resetForm()
    }
   render() {
    const   formConfig = {
         containerClassName:"container",
         formClassName:"form row",
         formId:"my-form",
         submitBtnOptions:{
             className:"btn btn-success",
             containerClassName:"form-group col-12",
             btnId:'',
             btnType:"submit",
             btnText:"SEND"
         },
         formIsValid: false,
         loading: false,
         formFields: {
             name: {
                 elementType: 'input',
                 elementConfig: {
                     type: 'text',
                     placeholder: 'Your Name',
                     name:'name'
                 },
                 //optional
                 options:{
                     id:"name",
                     className:"form-control ",
                     errorClassName:"error",
                     containerClassName:"form-group col-md-6",
                     labelClassName:"name-label",
                     labelFor:"#name",
                     label:"",
                     errorMsg:"This field is required."
                 },
                 value: '',
                 validation: {
                     required: true,
                     isString:true,
                 },
                 valid: false,
                 touched: false
             },
             //optional
             mobile: {
                 elementType: 'input',
                 elementConfig: {
                     type: 'text',
                     placeholder: 'mobile',
                     name:"street"
                 },
                 options:{
                     id:"mobile",
                     className:"form-control",
                     errorClassName:"error",
                     containerClassName:"form-group col-md-6",
                     labelClassName:"mobile-label",
                     labelFor:"#mobile",
                     label:"",
                     errorMsg:"This field is required."
                 },
                 value: '',
                 validation: {
                     required: true
                 },
                 valid: false,
                 touched: false
             },
             zipCode: {
                 elementType: 'input',
                 elementConfig: {
                     type: 'text',
                     placeholder: 'ZIP Code',
                     name:'zip_code'

                 },
                 options:{
                     id:"zip_code",
                     className:"form-control",
                     errorClassName:"error",
                     containerClassName:"form-group col-md-6",
                     labelClassName:"zip_code-label",
                     labelFor:"#zip_code",
                     errorMsg:"Field is required and numeric with 5 digits."
                 },
                 value: '',
                 validation: {
                     required: true,
                     minLength: 5,
                     maxLength: 5,
                     isNumeric: true,

                 },
                 valid: false,
                 touched: false
             },
             country: {
                 elementType: 'input',
                 elementConfig: {
                     type: 'text',
                     placeholder: 'Country',
                     name:'country'
                 },
                 //optional
                 options:{
                     id:"country",
                     className:"form-control",
                     errorClassName:"error",
                     containerClassName:"form-group col-md-6",
                     labelClassName:"country-label",
                     labelFor:"#country",
                     errorMsg:"This field is required."
                 },
                 value: '',
                 validation: {
                     required: true
                 },
                 valid: false,
                 touched: false
             },
             email: {
                 elementType: 'input',
                 elementConfig: {
                     type: 'email',
                     placeholder: 'Your E-Mail',
                     name:"email"
                 },
                 //optional
                 options:{
                     id:"email",
                     className:"form-control",
                     errorClassName:"error",
                     containerClassName:"form-group col-md-6",
                     labelClassName:"email-label",
                     labelFor:"#email",
                     errorMsg:"Field is empty or invalid email address."
                 },
                 value: '',
                 validation: {
                     required: true,
                     isEmail: true
                 },
                 valid: false,
                 touched: false
             },
             messageType: {
                 elementType: 'select',
                 elementConfig: {
                     options: [
                         {value: '', displayValue: 'Select type'},
                         {value: '1', displayValue: 'Request new demo'},
                         {value: '2', displayValue: 'contact  message'}
                         ],
                     name:"message_type"
                 },
                 //optional
                 options:{
                     id:"message_type",
                     className:"form-control",
                     errorClassName:"error",
                     containerClassName:"form-group col-md-6",
                     labelClassName:"message_type-label",
                     labelFor:"#message_type",
                     errorMsg:""
                 },
                 value: '',
                 validation: {},
                 valid: true
             },
             message: {
                 elementType: 'textarea',
                 elementConfig: {
                     type: 'message',
                     placeholder: 'Your Message',
                     name:"message"
                 },
                 //optional
                 options:{
                     id:"message",
                     className:"form-control",
                     errorClassName:"error",
                     containerClassName:"form-group col-12",
                     labelClassName:"email-label",
                     labelFor:"#message",
                     errorMsg:"This field is required."
                 },
                 value: '',
                 validation: {
                     required: true,

                 },
                 valid: false,
                 touched: false
             },
         },
     }
    return (
      <div className="App">
       <ReactForm onResetRef={ref => (this.ReactForm = ref)} onSubmitFormHandler={this.onSubmitFormHandler}  formConfig={formConfig}/>
      </div>
    );
  }
}

export default App;