@enterwell/react-form-builder NPM

Features

All funtionality of @enterwell/react-form-validation
- Keeps form's state and validation results
- Supports any kind of validation functions
- Dirty checking
- Separates data from view
- Relies on hooks, but can easily be used with class components
Any UI library
Support for custom layouts

Getting started

Installation

pnpm add @enterwell/react-form-builder

Usage

Somewhere at the beginning of your application register component provider (this is required, but all component types are optional). For Next.JS project this can be in _app.tsx.

import { FormBuilderProvider } from '@enterwell/react-form-builder';

const components = {
    string: memo((props) => <TextField {...props} />),
    wrapper: (props) => <Stack spacing={2} {...props} />,
    fieldWrapper: memo(() => <Box p={2} />
};

<FormBuilderProvider components={formComponents}>
    ...
</FormBuilderProvider>

Inside component create form definition render using <FormBuilder />.

import { FormBuilder, useFormField } from '@enterwell/react-form-builder';
import { isNonEmptyString } from '@enterwell/react-form-validation';

const form = {
    name: useFormField('', isNonEmptyString, 'string', 'Name'),
};

<FormBuilder form={form} onSubmit={handleSubmit} />

API

For details, see TypeScript generated typings.

`<FormBuilderProvider components={components} />`

Holds shared components collection.

Use this to wrap your top-most form content component to enable rendering components for requested types.

There is no pre-defined components, all types must be defined on per-project basis.

`useFormField(initialValue, validationFn, type, label, config)`

Defines the form field.

Shared some properties with @enterwell/react-form-validation, adds type and label. Type is used to select which component will be rendered, label is injected as component prop.

`<FormBuilder form={form} onSubmit={handleSubmit} />`

Renders the form.

wrapper type is provided in FormBuilderProvider components, it will be used to wrap all fields of the form.
wrapperField type is provided in FormBuilderProvider components, it will be used to wrap all FormBuilderField that are rendered in the form.
children are passed to this component, it will only render the wrapper and children.

`<FormBuilderField field={field} />`

Renders the form field.

Fields use FormBuilderProvider to select component based on field type and injects some props into the components:

value
label
error
helperText
onChange
onKeyDown

Advanced usage

Custom layout

Use <FormBuilderField /> manually position fields inside form using custom layout. When children are present in form builder, automatic field and wrapper rendering is disabled - user is responsible for rendering fields.

import { FormBuilderField } from '@enterwell/react-form-builder';

<FormBuilder form={form}>
    <Stack direction="row" spacing={2}>
        <FormBuilderField field={form.name} />
        <FormBuilderField field={form.email} />
    </Stack>
</FormBuilder>

Override components

You can nest FormBuilderProvider inside other provider. The bottom provider will take all components from its parent and override matching with newly provided component types.

<FormBuilderProvider components={formComponentsA}>
    <FormBuilderProvider components={formComponentsB}>
        <!-- Can use both types from A and B, if B contains same type as A, B type is resolved here -->
    </FormBuilderProvider>
</FormBuilderProvider>