@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
}