@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
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

@wadehrarshpreet/nbform

Build forms in React, using JSON/JS Object*

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

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@wadehrarshpreet/nbform

Build forms in React, using JSON/JS Object*

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

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads