react-form-input-fields

react-form-input-fields library will be used to create innovative/varieties of form fields. The library has form fields such as Text Box,Switch,Checkbox,Radio Button,Select/Dropdown.

Demo

Checkout the Demo

Install and Setup

npm install react-form-input-fields

Setup in code

import { FormField } from 'react-form-input-fields'
import 'react-form-input-fields/dist/index.css'

How to render Textbox

If you want to use text box in component follow the below method, type propery will decide what form fileds that going to be rendered on the page. type may have text,password,email,number .

<FormField
type="email" || type="password" || type="text" || type="number"
standard="bordereffect"
value={name}
keys={'name'}
effect={'effect_1'}
handleOnChange={(value) => this.handleOnChange(value, 'name')}
placeholder={'Enter Email'} />

Props

| Props | Description | values |is Mandatory| | --- | --- | ---|---| | type | To render Text box |email,text,password,number| yes | | standard | Text box with styles |bordereffect,backgroundeffect,labeleffect| yes | | value | Text box value |based on the input type| No | | keys |Ideally this will be your state property for web accessibility for label |your choice| yes| | effect | what kind of effect that you want |bordereffect=>effect_1,effect_2,effect_3,effect_4,effect_5,effect_6,effect_7,effect_8,effect_9| No| |||backgroundeffect=> effect_1,effect_2,effect_3,effect_4,effect_5,effect_6| |||labeleffect=>effect_1,effect_2,effect_3,effect_4,effect_5,effect_6,effect_7,effect_8,effect_9| No| | handleOnChange | Call back function for value change|| yes | | placeholder |Placeholder/Label text value| Any string| yes |

How to render Select/DropDown/Auto-complete

Select view is one of the form fields which will be used to choose one/more option among the values for best example we can say country selection. This will be used in server functionality such as singe value, Multivalue,single value with filter, multivalue with filter,multivalue with maxcount etc... which are going to be decided using props value.

Single value example code

<FormField
type="select"
value={'Male'}
option={option}
label={'Select Gender'}
keys={"gender"}
handleOnChange={(value) =>  this.handleOnChange(value)}  />

Single value with Filter

This will be used to filter value among the options, if you have more the option in array you can filter them by provide value in text box.

const option: [
{ label:  'Afganistan', value:  "Afganistan" },
{ label:  'Albania', value:  "Albania" },
{ label:  'Algeria', value:  "Algeria" },
{ label:  'American Samoa', value:  "American Samoa" },
{ label:  'Andorra', value:  "Andorra" },
{ label:  'Angola', value:  "Angola" },
],
<FormField
type="select"
filter
value={'Afganistan'}
option={option}
label={'Select your country'}
keys={"country"}
handleOnChange={(value) =>  this.handleOnChange(value)}  />

Multi value example code

const option: [
{ label:  'Tamil', value:  "tamil" },
{ label:  'English', value:  "english" },
{ label:  'Hindi', value:  "hindi" },
{ label:  'Telugu', value:  "telugu" },
],
<FormField
type="select"
multi
value={['Tamil','Hindi']}
option={option}
label={'Select Languages'}
keys={"language"}
handleOnChange={(value) =>  this.handleOnChange(value)}  />

Multi value with Filter and max result

maxResultCount property will be used to show selected result which has to be shown on the component.

const option: [
{ label:  'Tamil', value:  "tamil" },
{ label:  'English', value:  "english" },
{ label:  'Hindi', value:  "hindi" },
{ label:  'Telugu', value:  "telugu" },
],
<FormField
type="select"
multi
filter
maxResultCount:{2}
value={['Tamil','Hindi']}
option={option}
label={'Select Languages'}
keys={"language"}
handleOnChange={(value) =>  this.handleOnChange(value)}  />

How to render Switch

Switch field will be used when we have option like off/On controll.

<FormField
type="switch"
value={mode}
label="Toggle"
handleOnChange={(value) =>  this.handleOnChange(value)}/>

How to render Check Box

Check box for known language selection etc...

const selectedCheckBox: [],
const option: [
{ label:  'Tamil', value:  "Tamil" },
{ label:  'English', value:  "English" },
{ label:  'Telugu', value:  "Telugu" }
]

<FormField
type="checkbox"
effect={`effect_1` || `effect_2` || `effect_3` }
value={selectedCheckBox.includes(data.value) ? true : false}
valueToBeReturned={data.value}
label={data.label}
keys={data.label}
handleOnChange={(value) =>  this.handleOnChange(value)}/>

How to render Radio button

const selectedvalue:  'male',
const option: [
{ label:  'Male', value:  "male" },
{ label:  'Female', value:  "female" },
]
<FormField
type="radio"
value={selectedCheckBox === data.value ? true : false}
valueToBeReturned={data.value}
label={data.label}
keys={data.label}
handleOnChange={(value) =>  this.handleOnChange(value)}  />