https://github.com/enterwell/react-form-builder
Form builder functionality for React
https://github.com/enterwell/react-form-builder
Last synced: about 1 month ago
JSON representation
Form builder functionality for React
- Host: GitHub
- URL: https://github.com/enterwell/react-form-builder
- Owner: Enterwell
- License: mit
- Created: 2022-03-24T11:32:27.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-30T16:11:47.000Z (about 1 month ago)
- Last Synced: 2025-04-30T17:27:00.345Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://enterwell.github.io/react-form-builder/
- Size: 2.3 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Enterwell React Form Builder
Simplifies form rendering. Doesn't mess with your components. Simple and straight to the point.
[](https://www.npmjs.com/package/@enterwell/react-form-builder)
[](https://github.com/Enterwell/react-form-builder/actions/workflows/npm-publish.yml)
[](https://bundlephobia.com/package/@enterwell/react-form-builder)
## 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
```bash
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`.
```js
import { FormBuilderProvider } from '@enterwell/react-form-builder';
const components = {
string: memo((props) => ),
wrapper: (props) => ,
fieldWrapper: memo(() =>
};
...
```
Inside component create form definition render using ``.
```js
import { FormBuilder, useFormField } from '@enterwell/react-form-builder';
import { isNonEmptyString } from '@enterwell/react-form-validation';
const form = {
name: useFormField('', isNonEmptyString, 'string', 'Name'),
};
```
### API
For details, see TypeScript generated typings.
#### ``
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.
#### ``
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.
#### ``
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 `` 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.
```js
import { FormBuilderField } from '@enterwell/react-form-builder';
```
#### 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.
```js
```
## Development
For development:
```bash
pnpm install
pnpm dev
```
To builde production:
```bash
pnpm install
pnpm build
```