0.0.1-alpha.34 • Published 4 years ago

@wadehrarshpreet/nbform v0.0.1-alpha.34

Weekly downloads
62
License
Unlicense
Repository
github
Last release
4 years ago

nbForm

Build forms in React, using JSON/JS Object*


JavaScript Style Guide

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

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 example 1

NbForm Props

propstypeDescriptionRequired/Optional
idStringid of formRequired
dataArray of ObjectEach Object represent single input fieldRequired
onSubmitfunctionTrigger when form is submit. Gets two arguments isError{boolean} , data{JSObject}Optional
onChangefunctionTrigger 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 allOptional
submitButtonTextStringText shown in submit button default is SubmitOptional
buttonClassNameStringSubmit Button Class Name to give own styleOptional
defaultValueJSObject or JSONIt contain key value pair, where key is id of input field and value is default Value load on first render.Optional
customFooterJSX elementReplace Footer with custom footer Button. It require button with type='submit' for submitting the formOptional
reffunctionget form refOptional
formClassstringclassName given to nbformOptional
getResetFormActionfunctionyou will get a function in argument which trigger reset of form (use useRef to store these method)Optional
getSubmitActionfunctionyou will get a function in argument which trigger submit of form (use useRef to store these method)Optional
extraPropsobjectExtra props you want to pass to nbform which you can use in customValidation & customPropsOptional

Form-Elements

type: input

PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. input in case of Input fieldany String'' Required
autoCompleteTypeit set autoComplete property of input fieldsany String'off'
subTypeit refer to type of input field.text, email, number, tel, password, textarea String'text'
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
placeholderit set placeholder property of inputany String''
maxLengthit set maxLength property of input fieldsany String''
autoFocusit set autoFocus property of input fieldsany Booleanfalse
autoClearit will give x icon at right of input which will clear the field on clickBooleanfalse
getRefyou pass the function, you will get ref of input as first argument of that functionfunction Functionnull
inputStyleyou pass the style object for custom styling of input boxobject Objectnull
inputClassyou pass the className of the input for custom stylingany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
disableddisable the input fieldBooleanfalse
customDisabledit 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 propfunctionnull
customVisibleit 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 renderedfunctiontrue
errorMsgerror 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 fallbackObjectnull
currencyFormatterformat 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 numberBooleanfalse
currencyFormatterInternationalformat the currency with comma separated number inside input field with international standard. it will work only when subType is number & currencyFormatter is set to trueBooleanfalse
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull

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'
    }
  }

Input-Price


type: tel

Require package react-intl-tel-input

    npm install react-intl-tel-input
PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype 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 selectorany String'' Required
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
placeholderit set placeholder property of inputany String''
defaultCountryset the default country selection, passing the country code like 'in', 'us' etc
customVisibleit 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 renderedfunctiontrueSupported Country Code'in'
disableddisable the input fieldBooleanfalse
customDisabledit 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 propfunctionnull
inputClassyou pass the className of the input for custom stylingany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull

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.'
  }
}

Input-Tel


type: checkbox

PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. checkbox render checkboxany String'' Required
checkboxTextText to display next to checkbox. it can be normal text or htmlany String''
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
textClassyou pass the className of text for custom styling to textany String''
disableddisable the input fieldBooleanfalse
customDisabledit 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 propfunctionnull
customVisibleit 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 renderedfunctiontrue
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull

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'
  }
}

Input-Tel


type: radio

PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. radio render to radio inputany String'' Required
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
inlinerender radio input as inline element. All radio options in single linebooleanfalse
inlineLabeltrue will show label with radio input. Its best to use with inline property truebooleanfalse
optionsits array of Object each object represent single option in select menu. Each object must have two properties labelString & valueany{label: [String], value:[any]}[]
customOptionsit 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 labelString & valueanyfunction[]
containerClassyou pass the className of the container of particular input field for custom stylingany String''
disableddisable the input fieldBooleanfalse
customDisabledit 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 propfunctionnull
customVisibleit 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 renderedfunctiontrue
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull
{
  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.'
  }
}

NbRadio


type: select

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

npm install react-select
PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. select render to select dropdownany String'' Required
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
placeholderit set placeholder property of selectany String''
isSearchableEnable search to dropdown optionsbooleanfalse
optionsits array of Object each object represent single option in select menu. Each object must have two properties labelString & valueany{label: [String], value:[any]}[]
customOptionsit 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 labelString & valueanyfunction[]
containerClassyou pass the className of the container of particular input field for custom stylingany String''
disableddisable the input fieldBooleanfalse
customDisabledit 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 propfunctionnull
customVisibleit 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 renderedfunctiontrue
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull
{
  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'
  }
}

NbSelect


type: rating

PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. rating render to rating inputany String'' Required
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
maxmax rating user can give. 5 means 5 stars will be visibleany Number5
classNameclassName give to rating input to give custom stylingany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
customVisibleit 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 renderedfunctiontrue
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull
{
  id: 'feedbackRating',
  type: 'rating',
  max: 5,
  className: 'heading-3',
  validation: {
    required: true,
    dataType: 'int',
    min: 1
  },
  errorMsg: {
    default: 'Please rate the service.'
  }
}

NbRating


type: location-autocomplete

PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. location-autocomplete render to google places autocomplete inputany String'' Required
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
placeholderit set placeholder property of selectany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
autoClearit will give x icon at right of input which will clear the field on clickBooleanfalse
customVisibleit 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 renderedfunctiontrue
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull

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'
    }
  }
}

NbLocation


type: toggleButton

PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. toggleButton render toggleButton Inputany String'' Required
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
subTypesubType 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"
sizesize of button'sm', 'xs', 'lg' Stringnull
customVisibleit 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 renderedfunctiontrue
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull
{
  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'
}

NbToggleButton


type: switch

PropertyDescriptionpossible valuedefault
idIt 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 idany String'' Requied
typetype define which form element you want to render. switch render switch style checkboxany String'' Required
textText to display next to switch. it can be normal text or htmlany String''
textPositionPosition of text either left or rightleft, right String'right'
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
textClassyou pass the className of text for custom styling to textany String''
customVisibleit 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 renderedfunctiontrue
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull
{
  id: 'whatsAppSubscribe',
  type: 'switch',
  text: 'Get Updates on Whatsapp',
  containerClass: 'whatsapp',
  textPosition: 'left',
  validation: {
    required: true
  },
  errorMsg: {
    default: 'Please subscribe for update before proceed'
  }
}

NbSwitch


type: inputGroup

PropertyDescriptionpossible valuedefault
idIt should be unique id to identify input group. Its optional nbForm autogenerate if not provided.any String''
typetype define which form element you want to render. toggleButton render toggleButton Inputany String'' Required
uiLabelLabel for input fieldany String''
labelClassClass given to label for custom stylingany String''
containerClassyou pass the className of the container of particular input field for custom stylingany String''
customVisibleit 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 renderedfunctiontrue
inputIt takes array of Form Elements[Array of Form Elements][] Required
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull
{
  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'
      }
    }
  ]
}

NbInputGroup


type: customInput

PropertyDescriptionpossible valuedefault
idIt should be unique id to identify input group. Its optional nbForm autogenerate if not provided.any String''
typetype define which form element you want to render. toggleButton render toggleButton Inputany String'' Required
validationvalidation is used to give validation condition for input used to validate input when submitValidation Object Objectnull
customVisibleit 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 renderedfunctiontrue
renderrender 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 egfunctionnull Required
errorMsgerror 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 fallbackObjectnull
customPropsfunction in which you get value, formData & extraProps in argument and you can return custom props pass to form element based on your own conditionfunctionnull

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'
  }
}

NbCustomInput


Validation

Coming Soon...

Development

Please checkout CONTRIBUTING.

TODO

  • Remove react-bootstrap dependencies
  • Add more validation
  • Give more option to customize style
0.0.1-alpha.34

4 years ago

0.0.1-alpha.33

4 years ago

0.0.1-alpha.32

4 years ago

0.0.1-alpha.30

4 years ago

0.0.1-alpha.31

4 years ago

0.0.1-alpha.29

4 years ago

0.0.1-alpha.28

4 years ago

0.0.1-alpha.27

4 years ago

0.0.1-alpha.26

4 years ago

0.0.1-alpha.25

4 years ago

0.0.1-alpha.24

4 years ago

0.0.1-alpha.23

4 years ago

0.0.1-alpha.22

4 years ago

0.0.1-alpha.21

4 years ago

0.0.1-alpha.20

4 years ago

0.0.1-alpha.19

4 years ago

0.0.1-alpha.18

4 years ago

0.0.1-alpha.17

4 years ago

0.0.1-alpha.16

4 years ago

0.0.1-alpha.15

4 years ago

0.0.1-alpha.14

4 years ago

0.0.1-alpha.13

4 years ago

0.0.1-alpha.12

4 years ago

0.0.1-alpha.11

4 years ago

0.0.1-alpha.10

4 years ago

0.0.1-alpha.9

4 years ago

0.0.1-alpha.8

4 years ago

0.0.1-alpha.6

4 years ago

0.0.1-alpha.7

4 years ago

0.0.1-alpha.5

4 years ago

0.0.1-alpha.4

4 years ago

0.0.1-alpha.3

4 years ago

0.0.1-alpha.2

4 years ago

0.0.1-alpha.1

4 years ago

0.0.1-alpha.0

4 years ago