react-form-input-fields v1.0.9
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)} />