Create configurable forms
Hi! This is a react library that builds a form component for you. It uses basic material-ui library for designing and formik library for form action handling.
npm i react-forms
import {ReactForm} from 'react-forms'
import React from 'react'
export default const MyReactComponent = () => {
const myConfig = [{
type : 'text',
valueKey : 'myTextField',
fieldProps : { label : 'Sample Text Field' , fullWidth: true } ,
} ]
const myInitialValues = [{ myTextField : '' }]
return ( <div>
<ReactForm
config={myConfig}
initialValues={myInitialValue}
onSubmit = {(values : object) => {console.log(values)}}
/></div> )
}
- Text Field
- Autocomplete
- Check box
- Radio button
- Select Field
- Switch
- Place Suggest Field
- Date / Time Picker
Type : The config file is a an array , where each item is an Object or array of Object. Each item represents a row , so if the item contains single object then there will be single component in the row or else the form width will be distributed among the column components. Object Structure : type : string (component you want to render) valueKey : string (unique key used to identify the field) fieldProps: Accept all the default props available in there respective material-ui Api styles: CSS style object to be applied on the wrapper. Each component is wrapped around with a div component.
You don't need to pass any onChange since it all will be handled by the form builder using formik library
-
TextField :
{ type : 'text', valueKey: 'myText' fieldProps : { ...textFieldProps } styles : { margin : '0 auto'} }textFieldProps = TextFieldProps
-
SelectField :
{
type : 'select'
valueKey: 'mySelect'
fieldProps : {
...selectProps
options :[{name : 'Abc' , value : 'abc'} , {name : 'XYZ' , value : 'xyz'}]
}
styles : { width : '50%' }
}
selectProps = SelectProps
-
Checkbox
{ type : 'checkbox' valueKey: 'myCheckbox', fieldProps : { ...checkboxProps , options :[{name : 'Abc' , value : 'abc'} , {name : 'XYZ' , value : 'xyz'}] , header : 'My Checkbox Header', formControlLabelProps : formcontrollabelprops, formcontrolProps : formcontrolprops formHelperTextProps : formhelpertextprops } }Options can be an Array of string or Array of {name , value} object. This structure is followed by SelectField , Checkbox and Radiobutton. Except options all other props are optional and formControlLabelProps : formcontrollabelprops, formcontrolProps : formcontrolprops formHelperTextProps : formhelpertextprops checkboxProps : CheckboxProps
-
Radio Button
{ type : 'radio' , valueKey : 'myRadio' , fieldProps : { ...radioProps , options :[{name : 'Abc' , value : 'abc'} , {name : 'XYZ' , value : 'xyz'}], formcontrolProps : formcontrolprops formHelperTextProps : formhelpertextprops } }radioProps : RadioButtonProps
-
Switch
{ type : 'switch' , valueKey : 'mySwitch', fieldProps : { label : 'Demo Switch' ...switchProps } }switchProps = SwitchProps
-
Autocomplete
{ type : 'autocomplete' valuekey : 'myAutocomplete' fieldprops : { options? : [{name : 'abc'} , {name : 'xyz'}] apiUrl? : 'your-api-url', params? : {default params}, getRequestParams : (query:string)=>any highlighterProps : { highlightText : true, highlighColor : 'your-favourite-color, highlighterStyles : { Css Styling. } }, ...autocompleteProps } }autocompleteProps : AutocompleteProps Notes:
-
Either you provide options or you provide apiUrl to search on the web.
-
params : are the default parameters that would be passed with the url.
-
getRequestParams : a function that takes a query and returns additional parameter containing how the search term should be passed with api. (Checkout the examples for more details)
-
highlighterProps : By default the options are displayed as it is. - highlightText : default false , if true , then default highlighter will be used. - highlightColor : default Yello , if provided the color will override default color. - highlighterStyles : overrides the highlighter CSS styles.
-
Password
{ type : 'password' , valueKey : 'myPassswordField' fieldProps :{ label : 'Enter password', ...textFieldProps } } -
DatePicker / TimePicker :
{ type : 'date-picker' or 'time-picker', valueKey : 'myPicker', fieldProps: { ...datePickerProps format : 'DD/MM/YYYY', //output for display outputFormat : 'DD/MM/YYYY', //output in which value would be stored } } -
Place/Location Suggest :
{ type : 'location-suggest', valueKey : 'myLocationSuggest', fieldProps : { textFieldProps : textfieldprops, llistProps?: ListProps, listItemProps?: IListItemProps, placeAutocompleteProps?: PropTypes, locationNameKey?: 'locationVarName', listContainerStyle?: {css styles} } }
You can set your own default props for a specific field that would be used all over the application. All you need to do is use the setDefaultProps() method and pass the field type and your default props object. *Example : *
import {setDefaultProps} from 'react-forms'
setDefaultProps('text' , {fullWidth : true , color : 'secondary'})
Now this props would be default properties followed throughout the application. And of course if you don't want to use them somewhere then you can pass your own fieldProps in config file.
If you want to create your own custom component then we have provided a attachField property for you.
import {react , FC} from 'react'
import {attachField} from 'react-forms'
const YourComponent:FC<> = () =>{
return <div/>
}
attachField('your-component',<YourComponent/> ,{default-props})
Just imagine if you want to make a component behave differently based on the state of another component. Well it is possible by passing condition props to the config file. Check this example on sandbox
const config = [{
type : 'text' ,
valueKey : 'myText'
},{
type " text',
valueKey : 'myText2'
},{
type : 'radio' ,
valueKey : 'myRadio',
fieldProps :{
options : ['option1' , 'option2']
},
condition : {
hidden : true ,
defaultProps : { same as fieldProps} ,
truthyProps : { same as fieldProps} ,
logicOpn : 'AND' | 'OR',
values : [{
key : 'myText',
compareValue : 30 ,
operator : '==='
},{
key : 'myText2',
compareValue : 'abc ,
operator : '!=='
}
]
}
}]
Note:
- hidden : if True the component will be rendered if and only if the given conditions are true.
- logicOpn : AND or OR
- defaultProps : this props will be passed with fieldprops if the necessary conditions are not satisfied.
- truthyProps : this props will be passed with fieldProps if the conditions are satisfied.
- values : every object in the array contains a - key : which uniquely identifies the field in the form. - compareValue : the value to be compared with the value of the field identified by the key. - operator : comparition operator.
No form is complete without some some constraints or validation. We use YUP library for all kind of field validations. example :
import * as YUP from 'yup'
import { ReactForm } from 'react-forms'
const formValidation = Yup.object({
offerType: Yup.string().required('Select atleast 1 offer'),
myText: Yup.number().max(50)
})
const config = [{
type : 'text',
value : 'myText'
},
{
type: 'radio',
valueKey: 'offerType',
fieldProps: {
options: [{
name: 'Offer1',
value: 1
}, {
name: 'Offer2',
value: 2
}],
header: 'My Offers',
}}]
export default const Example:FC <> =() =>{
return <div>
<ReactForm
config = {config}
validationSchema = {formValidation}
onSubmit={(values:object)=>{console.log(values)} />
</div>
}
Once you hit the submit button it will perform validation as per the validation schema.
You can provide initial values if you want to the field of your choice. All you need to do is pass an array that looks something like this: [ {valueKey : value} , {valueKey : value} .....]
initVals = [ {myText : 'Init Value' , myCheckBox : ['option_2'] }
Now the form is filled , what to do next? Well the last thing which the ReactForm takes is an actionConfig object. The Structure
actionConfig = {
submitButtonText : string,
submitButtonLayout : 'right'|'center'|'fullwidth'
submitButtonProps : submitbuttonprops,
loaderProps : loaderprops,
actionContent : Custom JSX Component
}
Dependencies