@codegateinc/react-form-builder
Supports both React and React native
@codegateinc/react-form-builder is a javascript library that helps you create your own form in the simple way.
It can be used in React and React Native without any worry about compatibility.
Installation
yarn add @codegateinc/react-form-builder
or npm install @codegateinc/react-form-builder
Usage
1. First step is to wrap your app in FormProvider
import { FormProvider } from 'react-form-builder'
const App = () => (
<FormProvider>
{routes/components/children}
</FormProvider>
)
2. Second step is to implement your form
You can take formConfig
from here and move it somewhere else, same as rendered components,
you can just simply create helpers that will render input, checkbox or picker for you.
Important
Just remember that you need to render Field.TYPES
directly to Form
, so helpers must be
functions that returns JSX
import { Form, useForm } from '@codegateinc/react-form-builder'
useForm({
formName: "uniqueFOrmName",
formConfig={
inputName: {
type: FormTypes.FormFieldType.Input,
value: ''
},
checkboxName: {
type: FormTypes.FormFieldType.CheckBox,
value: false
},
pickerName: {
type: FormTypes.FormFieldType.Picker,
options: [
{
value: 0,
label: 'first'
},
{
value: 1,
label: 'second'
}
]
}
}
})
const form = (
<Form formName="uniqueFormName">
<Field.Input
formFieldName="inputName"
component={({ value, onChangeText }) => (
<input
value={value}
onChange={({ target }) => onChangeText(target.value)}
/>
)}
/>
<Field.Checkbox
formFieldName="checkboxName"
component={({ value, onChange }) => (
<input
type="checkbox"
checked={value}
onClick={onChange}
/>
)}
/>
<Field.Picker
formFieldName="pickerName"
component={({ options, onChange }) => (
<select
value={options.filter(option => option.isSelected)[0]?.value}
onChange={({ target }) => {
const selectedOption = options.filter(option => option.value === target.value)
onChange(selectedOption)
}}
>
{options.map(({ value, label }) => (
<option
value={value}
key={value}
>
{label}
</option>
))}
</select>
)}
/>
</Form>
)
Props
Form
props |
type |
description |
formName |
formName: string |
unique formName |
FormConfig
FormConfig is an Object with FieldConfig assigned to each key
FieldConfig
props |
type |
description |
value |
value?: string / number / boolean |
value defines initial values of input and checkbox |
type |
type: FormFieldType |
type is required prop that defines type of field |
isRequired |
isRequired?: boolean |
prop that defines if field should be validated, if true, you must provide validationRules |
validationRules |
validationRules?: Array<FormValidationRule> |
defines validation rules and error message to each rule |
options |
optiions?: Array<FormOption> |
options defines initial values of picker field |
disabled |
disabled?: boolean |
defines if field is disabled or not |
liveParser |
liveParse?: (value: ValidationValue) => ValidationValue |
if defined, it is called on each field change, which the function is related to |
forceLiveValidate |
forceLiveValidate?: boolean |
prop that defines if field is validated on each change |
Field
component |
props |
description |
Input |
formFieldName: string |
field name the same as in formConfig |
|
component(props: InputComponentProps): React.ReactNode |
render function |
Checkbox |
formFieldName: string |
field name the same as in formConfig |
|
component(props: CheckboxComponentProps): React.ReactNode |
render function |
Picker |
formFieldName: string |
field name the same as in formConfig |
|
component(props: PickerComponentProps): React.ReactNode |
render function |
FormTypes
name |
type |
value |
FormFieldType |
enum |
Input, Picker, CheckBox |
FormValidationRule |
type |
{ errorMessage: string, validationFunction: (value: ValidationValue, formState: FormState) => boolean} |
ValidationValue |
type |
string \| number \| boolean \| Array<FormOption> |
FormOption |
type |
{ value: FormOptionValue, label: string, isSelected?: boolean } |
FormOptionValue |
type |
number \| string |
useForm hook
useForm hook provides submit function along with some useful functions that allow to for example get value of single field or subscribe to it
useForm hooks returns
function |
type |
description |
submitForm |
() => void |
call to this function validates every field that was defined with validationRule , calls Form 's onError if errors occurs or onSuccess |
hasChanges |
boolean |
value that informs about any change done to form |
setField |
(formFieldName: string, config: Omit<FieldConfig, 'type'>) => void |
sets new config for selected field |
isFormValid |
boolean |
value that tells if form is valid |
getField |
(formFieldName: string) => FormInputField \| FormCheckboxField \| FormPickerField |
returns selected field |
restoreToInitial |
() => void |
restores form config to initial values |
clearForm |
() => void |
clears all values of form |
subscribe |
(formFieldName: string) => { onChange: <T>((value: T) => void) => void } |
subscribes to field and returns value from form after it changes (this particular field) |
setFieldError |
(formFieldName: string, errorMessage: string) => void |
sets custom error message to field |
useForm hooks props
prop name |
type |
description |
formName |
formName: string |
unique formName |
formConfig |
formConfig: KeyValuePair<FormConfig> |
form config that includes initial values, options, validators, and types of fields |
onSuccess |
onSuccess?: form => void |
optional function that provides parsed form after it has been submitted and is valid |
onError |
onError?: Function |
optional function that is invoked when form is not valid and has been submitted |
onUpdate |
onUpdate?: form => void |
optional function that calls on each form change |
Form fields
Input
types
type InputComponentProps = {
value: string,
disabled: boolean,
isPristine: boolean,
errorMessage?: string,
onBlur: VoidFunction,
onChangeText(text: string): void
}
type InputProps = {
formFieldName: string,
component(props: InputComponentProps): React.ReactNode
}
render example
<Field.Input
formFieldName={formFieldName}
component={({
value,
onChangeText,
onBlur
}) => {
return (
<input
value={value}
onChange={({ target }) => onChangeText(target.value)}
onBlur={onBlur}
/>
)
}}
/>
Checkbox
props
type CheckboxComponentProps = {
value: boolean,
disabled: boolean,
isPristine: boolean,
errorMessage?: string,
onChange: VoidFunction
}
type CheckBoxProps = {
formFieldName: string,
component(props: CheckboxComponentProps): React.ReactNode
}
render example
<Field.Checkbox
formFieldName={formFieldName}
component={({
value,
onChange
}) => (
<input
type="checkbox"
checked={value}
onClick={onChange}
/>
)}
/>
Picker
props
type PickerOnChange = (options: Array<FormOption>) => void
type PickerComponentProps = {
disabled: boolean,
isPristine: boolean,
errorMessage?: string,
onChange: PickerOnChange,
options: Array<FormOption>
}
type PickerProps = {
formFieldName: string,
component(props: PickerComponentProps): React.ReactNode
}