@wadehrarshpreet/nbform

v0.0.1-alpha.34

Published

2 years ago

React Form Generator Library

Downloads

0High
0Medium
0Low

wadehrarshpreet

react nbform library

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

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 [email protected]

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

| 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

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

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

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

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

NbRadio

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

NbSelect

type: rating

{
  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

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

{
  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

{
  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

{
  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

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

NbCustomInput

Validation

Coming Soon...

Development

Please checkout CONTRIBUTING.

TODO

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