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.
Checkout the Demo
npm install react-form-input-fields
import { FormField } from 'react-form-input-fields'
import 'react-form-input-fields/dist/index.css'
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 |
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.
<FormField
type="select"
value={'Male'}
option={option}
label={'Select Gender'}
keys={"gender"}
handleOnChange={(value) => this.handleOnChange(value)} />
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)} />
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)} />
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)} />
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)}/>
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)}/>
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)} />