React Dynamic Form Builder

A lightweight and powerful React library to dynamically generate forms from a JSON schema. Includes built-in validation, conditional logic, and a clean, customizable UI.

Features

• Schema-Driven: Generate forms from a simple JSON object.
• Validation: Built-in support for required, email, and more.
• Conditional Logic: Easily show or hide fields based on other field values (showIf).
• Flexible Layouts: Supports multi-column layouts.
• Extensible: Simple component-based architecture.
• Lightweight: No heavy dependencies.

Installation

npm install react-form-dynamic-builder

Example Usage

import React from 'react';
import { DynamicForm, FormSchema } from 'react-dynamic-form-builder';

const schema: FormSchema = {
  title: 'User Registration',
  layout: '2-column',
  fields: [
    {
      name: 'fullName',
      label: 'Full Name',
      type: 'text',
      required: true,
      placeholder: 'John Doe',
    },
    {
      name: 'email',
      label: 'Email Address',
      type: 'email',
      required: true,
      validation: 'email',
      placeholder: '[email protected]',
    },
    {
      name: 'role',
      label: 'Role',
      type: 'select',
      required: true,
      options: ['Admin', 'Editor', 'Viewer', 'Other'],
    },
    {
      name: 'otherRole',
      label: 'Please specify your role',
      type: 'text',
      required: true,
      showIf: {
        field: 'role',
        equals: 'Other',
      },
      placeholder: 'e.g., Project Manager',
    }
  ],
};

function App() {
  const handleSubmit = (data: Record<string, any>) => {
    console.log('Form submitted:', data);
  };

  return (
    <div className="App">
      <DynamicForm schema={schema} onSubmit={handleSubmit} />
    </div>
  );
}

export default App;

Schema Format

The schema is a JSON object with the following properties:

• title (string): The title of the form.
• layout ('1-column' | '2-column', optional): The overall form layout.
• fields (array): An array of field objects.

Field Properties

| Property | Type | Description | |---------------|------------------------------------|---------------------------------------------------------------------------| | name | string | Required. Unique identifier for the field. | | label | string | Required. The display label for the field. | | type | string | Required. Type of input ('text', 'email', 'select', 'date', 'file', 'textarea', 'checkbox'). | | required | boolean | If the field is mandatory. | | validation | string | Validation rule (e.g., 'email'). | | options | string[] | Array of options for select fields. | | placeholder | string | Placeholder text for the input. | | showIf | { field: string, equals: any } | Conditional logic to show the field. | | layout | 'full-width' | Makes the field span all columns in a multi-column layout. |