@codegateinc/react-form-builder v0.1.45

@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

FormConfig

FormConfig is an Object with FieldConfig assigned to each key

FieldConfig

Field

FormTypes

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

useForm hooks props

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
}