@wadehrarshpreet/nbform

Build forms in React, using JSON/JS Object*

---

NbForm is library to generate form using JSON or JavaScript Object. Library includes all input form elements with its style guide. It include error message and strict data type validation out of box.

• Installation
• Get Started
• Usage
• NbForm Props
• Form-Elements
  • type: input
  • type: tel
  • type: checkbox
  • type: radio
  • type: select
  • type: rating
  • type: location-autocomplete
  • type: toggleButton
  • type: switch
  • type: inputGroup
  • type: customInput
• Validation
• Development
• TODO

Installation

npm install --save @wadehrarshpreet/nbform

or

yarn add @wadehrarshpreet/nbform

Get Started

import Bootstrap 3.x stylesheet before use this library install react-bootstrap* v0.3

  npm install react-bootstrap@0.32.4

Before use, first import nbform style

@import '~/node_modules/nbform/dist/nbform.css';

import style in js

import 'nbform/dist/nbform.css';

Usage

import React from 'react';
import NbForm from 'nbform';

const CONTENT = {
  FORM_INPUTS: [
    {
      id: 'name',
      type: 'input',
      autoCompleteType: 'name',
      subType: 'text',
      placeholder: 'Your Name',
      maxLength: 100,
      autoFocus: true,
      validation: {
        required: true
      },
      errorMsg: {
        default: 'Please enter Valid Name.',
        required: 'This field is required.'
      }
    },
    {
      id: 'email',
      type: 'input',
      autoCompleteType: 'email',
      subType: 'text',
      validation: {
        required: true,
        dataType: 'email'
      },
      placeholder: 'Your Email',
      errorMsg: {
        default: 'Please enter Valid Email.',
        required: 'Email is Required',
        dataType: 'Please enter Valid Email.'
      }
    },
    {
      id: 'password',
      type: 'input',
      subType: 'password',
      validation: {
        required: true
      },
      placeholder: 'Password',
      errorMsg: {
        default: 'Please enter Valid Password.',
        required: 'Password is Required'
      }
    }
  ]
};

const SignUpForm = (props) => {
  return (
    <div className='form'>
      <h3>SignUp</h3>
      <NbForm
        submitButtonText='Submit'
        formClass={'get-user-info__form-container'}
        data={CONTENT.FORM_INPUTS}
        onSubmit={(isError, data) => {
          console.log('isError', isError);
          if (isError) {
            // trigger custom error
          }
          console.log('data', data);
        }}
        id={'getUserInfoForm'}
      />
    </div>
  );
};

export default SignUpForm;

Output

NbForm Props

props	type	Description	Required/Optional
id	String	id of form	Required
data	Array of Object	Each Object represent single input field	Required
onSubmit	function	Trigger when form is submit. Gets two arguments isError{boolean} , data{JSObject}	Optional
onChange	function	Trigger when form data changes. Gets three arguments formData{JSObject}[Current data of form], updateFormData{Function}[Setter of FormData, You can custom update formData. it takes two argument key and value. where key represent the id of input define in data] & delta unlike formData it contain property which actually changes not all	Optional
submitButtonText	String	Text shown in submit button default is Submit	Optional
buttonClassName	String	Submit Button Class Name to give own style	Optional
defaultValue	JSObject or JSON	It contain key value pair, where key is id of input field and value is default Value load on first render.	Optional
customFooter	JSX element	Replace Footer with custom footer Button. It require button with type='submit' for submitting the form	Optional
ref	function	get form ref	Optional
formClass	string	className given to nbform	Optional
getResetFormAction	function	you will get a function in argument which trigger reset of form (use useRef to store these method)	Optional
getSubmitAction	function	you will get a function in argument which trigger submit of form (use useRef to store these method)	Optional
extraProps	object	Extra props you want to pass to nbform which you can use in customValidation & customProps	Optional

Form-Elements

type: input

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. input in case of Input field	any [String]	'' [Required]
autoCompleteType	it set autoComplete property of input fields	any [String]	'off'
subType	it refer to type of input field.	text, email, number, tel, password, textarea [String]	'text'
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
placeholder	it set placeholder property of input	any [String]	''
maxLength	it set maxLength property of input fields	any [String]	''
autoFocus	it set autoFocus property of input fields	any [Boolean]	false
autoClear	it will give x icon at right of input which will clear the field on click	[Boolean]	false
getRef	you pass the function, you will get ref of input as first argument of that function	function [Function]	null
inputStyle	you pass the style object for custom styling of input box	object [Object]	null
inputClass	you pass the className of the input for custom styling	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
disabled	disable the input field	[Boolean]	false
customDisabled	it take function which should returns boolean. In argument you will get current input value as first argument and second argument is formData. It has higher preference than disabled prop	function	null
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
currencyFormatter	format the currency with comma separated number inside input field. by default it format currency as indian standard you can check currencyFormatterInternational prop to enable international standard. it will work only when subType is number	[Boolean]	false
currencyFormatterInternational	format the currency with comma separated number inside input field with international standard. it will work only when subType is number & currencyFormatter is set to true	[Boolean]	false
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

Example:-

  {
    id: 'price',
    type: 'input',
    autoCompleteType: 'name',
    subType: 'number',
    placeholder: 'Your Name',
    autoFocus: true,
    currencyFormatter: true,
    currencyFormatterInternationl: true,
    customProps: (val, formData, extraProps)=> {
        if(val === extraProps) {
            return {
                rightText: <b>Invalid</b>
            }
        }
        return {};
    }
    validation: {
      required: true,
      dataType: 'float'
    },
    errorMsg: {
      default: 'Please enter Valid Name.',
      required: 'This field is required.',
      dataType: 'Enter valid price'
    }
  }

---

type: tel

Require package react-intl-tel-input

    npm install react-intl-tel-input

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. tel in case of tel field. it uses react-intl-tel-input to render tel input with country selector	any [String]	'' [Required]
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
placeholder	it set placeholder property of input	any [String]	''
defaultCountry	set the default country selection, passing the country code like 'in', 'us' etc
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
disabled	disable the input field	[Boolean]	false
customDisabled	it take function which should returns boolean. In argument you will get current input value as first argument and second argument is formData. It has higher preference than disabled prop	function	null
inputClass	you pass the className of the input for custom styling	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

When you get final data you will see two extra field you will get for each "tel" input which is dialCode & iso2 in case you required.

{
  id: 'mobile',
  type: 'tel',
  autoCompleteType: 'tel',
  defaultCountry: 'in',
  placeholder: 'Your Mobile',
  validation: {
    required: true,
    dataType: 'int'
  },
  errorMsg: {
    default: 'Please enter Valid Mobile.',
    required: 'Please enter Valid Mobile.'
  }
}

---

type: checkbox

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. checkbox render checkbox	any [String]	'' [Required]
checkboxText	Text to display next to checkbox. it can be normal text or html	any [String]	''
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
textClass	you pass the className of text for custom styling to text	any [String]	''
disabled	disable the input field	[Boolean]	false
customDisabled	it take function which should returns boolean. In argument you will get current input value as first argument and second argument is formData. It has higher preference than disabled prop	function	null
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

defaultValue of checkbox is false which you can give via NbForm prop

{
  type: 'checkbox',
  id: 'checkedAll',
  checkboxText: 'I agree to <a href="/tnc" target="_blank">terms & condition</a>',
  containerClass: 'tnc',
  validation: {
    value: true
  },
  errorMsg: {
    value: 'Please accept Terms & Condition before proceed'
  }
}

---

type: radio

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. radio render to radio input	any [String]	'' [Required]
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
inline	render radio input as inline element. All radio options in single line	[boolean]	false
inlineLabel	true will show label with radio input. Its best to use with inline property true	[boolean]	false
options	its array of Object each object represent single option in select menu. Each object must have two properties label[String] & value[any]	[{label: [String], value:[any]}][array]	[]
customOptions	it take function with formData as argument, which should return array of object, where each object represent single option in select menu. Each object must have two properties label[String] & value[any]	function	[]
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
disabled	disable the input field	[Boolean]	false
customDisabled	it take function which should returns boolean. In argument you will get current input value as first argument and second argument is formData. It has higher preference than disabled prop	function	null
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

{
  id: 'apartmentType',
  type: 'radio',
  inline: true,
  uiLabel: 'You Stay in: ',
  inlineLabel: true,
  validation: {
    required: true
  },
  options: [
    {
      label: '1BHK/1RK',
      value: 'BHK1'
    },
    {
      label: '2BHK',
      value: 'BHK2'
    },
    {
      label: '3BHK/+',
      value: 'BHK3'
    }
  ],
  errorMsg: {
    default: 'Please select Valid ApartmentType.',
    required: 'Please select Valid Apartment Type.'
  }
}

---

type: select

It use react-select so install react-select before using select

npm install react-select

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. select render to select dropdown	any [String]	'' [Required]
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
placeholder	it set placeholder property of select	any [String]	''
isSearchable	Enable search to dropdown options	[boolean]	false
options	its array of Object each object represent single option in select menu. Each object must have two properties label[String] & value[any]	[{label: [String], value:[any]}][array]	[]
customOptions	it take function with formData as argument, which should return array of object, where each object represent single option in select menu. Each object must have two properties label[String] & value[any]	function	[]
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
disabled	disable the input field	[Boolean]	false
customDisabled	it take function which should returns boolean. In argument you will get current input value as first argument and second argument is formData. It has higher preference than disabled prop	function	null
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

{
  id: 'currentFloor',
  type: 'select',
  placeholder: 'Floor',
  isSearchable: true,
  uiLabel: 'On which floor is your house?',
  options: [{ label: 'Ground', value: 0 }, { label: 'First', value: 1 }, { label: 'Two', value: 2 }, { label: 'Third', value: 3 }, { label: 'Fourth', value: 4 }, { label: 'Fifth', value: 5 }],
  validation: {
    min: 0,
    required: true
  },
  errorMsg: {
    default: 'Enter valid floor number',
    required: 'Floor number is required',
    min: 'Enter valid floor number'
  }
}

---

type: rating

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. rating render to rating input	any [String]	'' [Required]
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
max	max rating user can give. 5 means 5 stars will be visible	any [Number]	5
className	className give to rating input to give custom styling	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

{
  id: 'feedbackRating',
  type: 'rating',
  max: 5,
  className: 'heading-3',
  validation: {
    required: true,
    dataType: 'int',
    min: 1
  },
  errorMsg: {
    default: 'Please rate the service.'
  }
}

---

type: location-autocomplete

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. location-autocomplete render to google places autocomplete input	any [String]	'' [Required]
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
placeholder	it set placeholder property of select	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
autoClear	it will give x icon at right of input which will clear the field on click	[Boolean]	false
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

location-autocomplete uses Input field to render input so it support all input props with location-autocomplete

{
  id: 'officeLocation',
  type: 'location-autocomplete',
  placeholder: 'Your Office Location',
  errorMsg: {
    default: 'Please enter Valid Location.',
    required: 'Please enter Valid Location.'
  },
  validation: {
    required: true
  },
  autoClear: true,
  searchOptions: {
    componentRestrictions: {
      country: 'IN'
    }
  }
}

---

type: toggleButton

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. toggleButton render toggleButton Input	any [String]	'' [Required]
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
subType	subType define how toggle Button group interact if its radio then only one can be selected or if its checkbox then multiple can be selected	'radio' or 'checkbox' [String]	"radio"
size	size of button	'sm', 'xs', 'lg' [String]	null
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

{
  id: 'typeOfBuilding',
  uiLabel: 'Type of building',
  subType: 'radio',
  options: [
    {
      value: 'AP',
      label: 'Apartment'
    },
    {
      value: 'IF',
      label: 'Independent Floor'
    },
    {
      value: 'IH',
      label: 'Independent House'
    }
  ],
  validation: {
    required: true
  },
  errorMsg: {
    default: ' What kind of building is your house in?'
  },
  type: 'toggleButton'
}

---

type: switch

Property	Description	possible value	default
id	It should be unique id as it will be use to map value with id. When you get data onSubmit you can access input value using this id	any [String]	'' [Requied]
type	type define which form element you want to render. switch render switch style checkbox	any [String]	'' [Required]
text	Text to display next to switch. it can be normal text or html	any [String]	''
textPosition	Position of text either left or right	left, right [String]	'right'
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
textClass	you pass the className of text for custom styling to text	any [String]	''
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

{
  id: 'whatsAppSubscribe',
  type: 'switch',
  text: 'Get Updates on Whatsapp',
  containerClass: 'whatsapp',
  textPosition: 'left',
  validation: {
    required: true
  },
  errorMsg: {
    default: 'Please subscribe for update before proceed'
  }
}

---

type: inputGroup

Property	Description	possible value	default
id	It should be unique id to identify input group. Its optional nbForm autogenerate if not provided.	any [String]	''
type	type define which form element you want to render. toggleButton render toggleButton Input	any [String]	'' [Required]
uiLabel	Label for input field	any [String]	''
labelClass	Class given to label for custom styling	any [String]	''
containerClass	you pass the className of the container of particular input field for custom styling	any [String]	''
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
input	It takes array of Form Elements	[Array of Form Elements]	[] [Required]
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

{
  type: 'inputGroup',
  containerClass: 'input-group-rent-apType',
  uiLabel: 'Enter Your Name',
  labelClass: 'fs-18', //font-size: 18px;
  input: [
    {
      id: 'firstName',
      type: 'input',
      subType: 'text',
      uiLabel: 'First Name',
      placeholder: 'Enter First Name',
      maxLength: 100,
      validation: {
        required: true,
        minlength: 3
      },
      errorMsg: {
        default: 'Enter Valid First Name'
      }
    },
    {
      id: 'lastName',
      type: 'input',
      subType: 'text',
      placeholder: 'Enter Last Name',
      maxLength: 100,
      uiLabel: 'Last Name',
      validation: {
        required: true,
        minlength: 3
      },
      errorMsg: {
        default: 'Enter Valid Last Name'
      }
    }
  ]
}

---

type: customInput

Property	Description	possible value	default
id	It should be unique id to identify input group. Its optional nbForm autogenerate if not provided.	any [String]	''
type	type define which form element you want to render. toggleButton render toggleButton Input	any [String]	'' [Required]
validation	validation is used to give validation condition for input used to validate input when submit	Validation Object [Object]	null
customVisible	it take function which should returns boolean. In argument you will get formData as argument. If return value is false then input field will not be rendered	function	true
render	render will take function which has two argument first argument is value of input correspond to id and second argument is updateValue in which you have to pass the value on change. See eg	[function]	null [Required]
errorMsg	error messages to display based on validation error. It contain map correspond to validation object, so that error message will be visible if particular validation failed. default error Message is required as fallback	[Object]	null
customProps	function in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own condition	function	null

you have to import React for using JSX

{
  id: 'myCustomInput',
  type: 'customInput',
  uiLabel: 'Enter Password'
  render: (value, updateData)=> {
    return(
      <div className='my-custom-input'>
        <input type='password' value={value} onChange={(event)=> {
          updateData(event.target.value);
        }}>
      </div>
    )
  },
  validation: {
    required: true,
    minlength: 3
  },
  errorMsg: {
    default: 'Enter Valid Password'
  }
}

---

Validation

Coming Soon...

Development

Please checkout CONTRIBUTING.

TODO

• Remove react-bootstrap dependencies
• Add more validation
• Give more option to customize style