react-dynamic-form-renderer v1.0.1

React Dynamic Form Renderer

A powerful and flexible React package for rendering dynamic forms with advanced validation, rule engine, and custom styling.

Features

Core Components

• Dynamic form rendering from JSON schema
• Form state management with context
• Extensible field architecture
• Responsive grid layout

Field Types

• Text Input
• Select/Dropdown
• Checkbox
• Radio
• Textarea
• Date
• File Upload
• Card List (Dynamic form arrays)
• Beneficiary Fields (with percentage validation)
• Dynamic Dropdown (dependent fields)
• PDF Package (document management)
• Address (with validation)
• Identification (SSN/ITIN with masking)

Advanced Features

• Page Rules Engine
  • Conditional field visibility
  • Dynamic field dependencies
  • Complex validation rules
  • Value manipulation
• Built-in validation system
• Custom styling with SCSS
• Masking and formatting
• Address validation
• Document management

Installation

npm install react-dynamic-form-renderer

Quick Start

import { DynamicForm } from 'react-dynamic-form-renderer';

// Define your form schema
const formSchema = [
  {
    type: 'text',
    name: 'firstName',
    label: 'First Name',
    validation: {
      required: true,
      minLength: 2,
    },
  },
  {
    type: 'select',
    name: 'country',
    label: 'Country',
    options: [
      { value: 'us', label: 'United States' },
      { value: 'uk', label: 'United Kingdom' },
    ],
  },
];

// Define rules for dynamic behavior
const rules = [
  {
    conditions: [
      {
        field: 'country',
        operator: 'equals',
        value: 'us',
      },
    ],
    actions: [
      {
        type: 'show',
        target: 'state',
      },
    ],
  },
];

function MyForm() {
  const handleSubmit = (formData) => {
    console.log('Form submitted:', formData);
  };

  return (
    <DynamicForm
      schema={formSchema}
      rules={rules}
      onSubmit={handleSubmit}
      className="my-form"
    />
  );
}

Documentation

Schema Definition

Each field in the schema can have the following properties:

{
  type: string,          // Field type (required)
  name: string,          // Field name (required)
  label: string,         // Field label
  validation: {          // Validation rules
    required: boolean,
    pattern: RegExp,
    minLength: number,
    maxLength: number,
    custom: function,
    message: string,
  },
  options: Array,        // Options for select/radio fields
  placeholder: string,   // Placeholder text
  className: string,     // Additional CSS classes
  disabled: boolean,     // Disable the field
}

Rule Engine

Rules are defined with conditions and actions:

{
  conditions: [
    {
      field: string,     // Target field name
      operator: string,  // Comparison operator
      value: any,        // Value to compare against
    }
  ],
  operator: 'AND'|'OR',  // How to combine conditions
  actions: [
    {
      type: string,      // Action type
      target: string,    // Target field
      value: any,        // Optional value
    }
  ]
}

Available operators:

• equals
• notEquals
• greaterThan
• lessThan
• contains
• notContains
• in
• notIn
• regex

Available actions:

• show
• hide
• enable
• disable
• setValue
• clearValue
• validate

Advanced Field Types

CardListField

{
  type: 'cardList',
  name: 'items',
  label: 'Items',
  schema: [], // Nested form schema
  validation: {
    minItems: number,
    maxItems: number,
  }
}

BeneficiaryField

{
  type: 'beneficiary',
  name: 'beneficiaries',
  label: 'Beneficiaries',
  validation: {
    required: true,
    totalPercentage: 100,
  }
}

AddressField

{
  type: 'address',
  name: 'address',
  label: 'Address',
  usStatesOnly: boolean,
  validation: {
    required: true,
  }
}

Styling

The package includes a comprehensive SCSS system:

// Import base styles
@import 'react-dynamic-form-renderer/styles/main.scss';

// Override theme variables
$form-primary-color: #007bff;
$form-border-radius: 4px;
$form-spacing: 1rem;
$form-font-family: 'Arial', sans-serif;

Development

Running the Example

1. Clone the repository

git clone https://github.com/yourusername/react-dynamic-form-renderer.git

2. Install dependencies

cd react-dynamic-form-renderer
npm install

3. Start the development server

npm run dev

4. Open http://localhost:5173 to view the example app

Running Tests

# Run all tests
npm test

# Run tests with coverage
npm test -- --coverage

# Run tests in watch mode
npm test -- --watch

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, email support@example.com or create an issue in the GitHub repository.