Features ✨

• Schema-Driven Forms - JSON-powered forms with zero boilerplate
• Real-Time Validation - Built-in validators + custom async validation
• Conditional Logic - Show/hide fields based on other fields' values
• File Handling - Uploads with previews (Base64/Blob/File)
• API-Driven Fields - Dynamic options from endpoints
• TypeScript Ready - Full type safety
• Performance Optimized - Debounced updates, lazy loading
• Accessibility - ARIA attributes out of the box
• Extensible - Add custom fields and validators
• Styling Freedom - Tailwind, CSS modules, or inline styles

Installation 📦

npm install react-forminate
# or
yarn add react-forminate

Basic Usage 🚀

import { DynamicForm } from "react-forminate";

const formSchema = {
  formId: "userForm",
  fields: [
    {
      fieldId: "name",
      type: "text",
      label: "Full Name",
      required: true,
    },
    {
      fieldId: "email",
      type: "email",
      label: "Email",
      required: true,
      validation: [{ type: "email" }],
    },
    {
      fieldId: "subscribe",
      type: "checkbox",
      label: "Subscribe to newsletter",
      visibility: {
        dependsOn: "email",
        condition: "not_empty",
      },
    },
  ],
};

export default () => (
  <DynamicForm formData={formSchema} onSubmit={console.log} />
);

Advanced Features 🛠

Conditional Fields

{
  fieldId: "company",
  type: "text",
  label: "Company Name",
  visibility: {
    dependsOn: "employmentStatus",
    condition: "equals",
    value: "employed"
  }
}

File Uploads

{
  fieldId: "avatar",
  type: "file",
  accept: "image/*",
  storageFormat: "base64",
  events: {
    onCustomUpload: (files) => uploadToServer(files)
  }
}

API-Driven Select

{
  fieldId: "products",
  type: "select",
  dynamicOptions: {
    endpoint: "/api/products",
    transformResponse: (res) =>
      res.map(product => ({ label: product.name, value: product.id }))
  }
}

Custom Validation

{
  fieldId: "username",
  type: "text",
  validation: [
    {
      custom: async (value) => {
        const available = await checkUsernameAvailability(value);
        return available;
      },
      message: "Username already taken"
    }
  ]
}

Auto-Scroll on Validation Errors

{
  formId: "userForm",
  options: {
    scrollOnErrorValidation: true, // Automatically scroll to first error field
  },
  fields: [
    // ... your fields
  ]
}

When enabled, clicking the submit button on an invalid form will automatically scroll to the first field with a validation error, providing better user experience for long forms.

Field Types Supported 🏗️

Input Fields

| Type | Description | Example Use Case | | -------- | --------------------------- | ------------------------ | | text | Standard text input | Names, general text | | email | Email input with validation | User emails | | password | Masked password input | Login forms | | number | Numeric input | Age, quantity | | tel | Telephone number input | Phone numbers | | url | URL input with validation | Website links | | search | Search-style input | Search boxes | | date | Date picker | Birthdates, appointments | | file | File upload with previews | Avatars, documents |

Selection Fields

| Type | Description | Special Features | | -------- | ------------------ | ------------------- | | select | Dropdown select | Dynamic API options | | radio | Radio button group | Single selection | | checkbox | Checkbox group | Multiple selection |

Layout & Structural Fields

| Type | Description | Configuration Options | | --------- | ---------------------------- | ---------------------- | | group | Logical field grouping | Nested fields, legends | | container | Visual wrapper (div/section) | Grid layouts, spacing | | spacer | Vertical/horizontal spacing | Pixel-perfect gaps |

Special Fields

| Type | Description | Content Flexibility | | -------- | ------------------------- | ---------------------------- | | gridview | Data grid with pagination | API-driven tables | | content | Custom HTML/JSX content | Terms, rich text, components | | textarea | Multi-line text area | Long-form content |

Hooks for Control 🎣

import {
  useFormValue,
  useFormActions,
  FormRegistryProvider,
} from "react-forminate";

// Get single value
const email = useFormValue("email", "formId");

// Access all form actions
const { validateForm, setValue } = useFormActions("formId");

// Wrap your app to enable multi-form control
<FormRegistryProvider>
  <App />
</FormRegistryProvider>;

Why React Forminate? 💡

✔ Productivity - Build complex forms in minutes ✔ Maintainability - Schema-based = cleaner code ✔ Consistency - Unified validation & styling ✔ Flexibility - Extend with custom fields

Documentation 📖

For complete documentation and advanced examples, visit our documentation site.