FormGenius

A powerful, schema-driven React form generator. Define your form structure once, and FormGenius handles validation, error handling, and edge cases automatically.

Installation

npm install react-form-genius

Note: Requires React 17.0.0 or higher.

Quick Start

import React from "react";
import { FormGenius } from "react-form-genius";

function SimpleForm() {
  return (
    <FormGenius
      schema={{
        name: { type: "text", label: "Name", required: true },
        email: { type: "email", label: "Email", required: true },
        message: { type: "text", label: "Message", required: true, minLength: 10 },
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}

Form Types

Multi-Step Form

<FormGenius
  schema={{
    firstName: { type: "text", label: "First Name", required: true },
    lastName: { type: "text", label: "Last Name", required: true },
    email: { type: "email", label: "Email", required: true },
    username: { type: "text", label: "Username", required: true },
    password: { type: "password", label: "Password", required: true },
  }}
  steps={[
    ["firstName", "lastName", "email"],
    ["username", "password"],
  ]}
  showStepIndicators={true}
  onSubmit={(data) => console.log(data)}
/>

Array Form (Dynamic Lists)

<FormGenius
  schema={{
    skills: {
      type: "text",
      label: "Skills",
      isArray: true,
      minItems: 1,
      maxItems: 10,
      addButtonLabel: "Add Skill",
      placeholder: "Enter a skill",
    },
  }}
  onSubmit={(data) => console.log(data)}
/>

Conditional Form

<FormGenius
  schema={{
    accountType: { type: "text", label: "Account Type", required: true },
    companyName: {
      type: "text",
      label: "Company Name",
      dependsOn: "accountType",
      showIf: (value) => value === "business",
      required: true,
    },
  }}
  onSubmit={(data) => console.log(data)}
/>

Form with Default Values

<FormGenius
  defaultValues={{ name: "John Doe", email: "[email protected]" }}
  schema={{
    name: { type: "text", label: "Name", required: true },
    email: { type: "email", label: "Email", required: true },
  }}
  onSubmit={(data) => console.log(data)}
/>

Advanced Features

Custom Validation

<FormGenius
  schema={{
    password: {
      type: "password",
      label: "Password",
      required: true,
      validate: (value) => {
        if (value.length < 8) return "Must be at least 8 characters";
        if (!/[A-Z]/.test(value)) return "Must contain uppercase letter";
        if (!/[a-z]/.test(value)) return "Must contain lowercase letter";
        if (!/\d/.test(value)) return "Must contain number";
        return undefined;
      },
    },
    confirmPassword: {
      type: "password",
      label: "Confirm Password",
      required: true,
      validate: (value, allValues) => {
        return value !== allValues.password ? "Passwords do not match" : undefined;
      },
    },
  }}
  onSubmit={(data) => console.log(data)}
/>

Pattern Validation

<FormGenius
  schema={{
    username: {
      type: "text",
      label: "Username",
      required: true,
      pattern: /^[a-zA-Z0-9_]+$/,
      placeholder: "Only letters, numbers, and underscores",
    },
    phone: {
      type: "tel",
      label: "Phone",
      pattern: /^\+?[\d\s-()]+$/,
    },
  }}
  onSubmit={(data) => console.log(data)}
/>

Custom Rendering

<FormGenius
  schema={{
    bio: {
      label: "Bio",
      required: true,
      render: ({ value, onChange, error, id, name }) => (
        <div>
          <textarea
            id={id}
            name={name}
            value={value || ""}
            onChange={(e) => onChange(e.target.value)}
            style={{
              width: "100%",
              padding: "8px",
              border: error ? "2px solid red" : "1px solid #ccc",
            }}
          />
          {error && <div style={{ color: "red", fontSize: "12px" }}>{error}</div>}
        </div>
      ),
    },
    country: {
      label: "Country",
      required: true,
      render: ({ value, onChange, error, id, name }) => (
        <select id={id} name={name} value={value || ""} onChange={(e) => onChange(e.target.value)}>
          <option value="">Select country</option>
          <option value="usa">USA</option>
          <option value="uk">UK</option>
        </select>
      ),
    },
  }}
  onSubmit={(data) => console.log(data)}
/>

Layouts

// Stack (default)
<FormGenius layout="stack" schema={{...}} />

// Grid (3 columns)
<FormGenius layout="grid" schema={{...}} />

// Two-column
<FormGenius layout="two-column" schema={{...}} />

Input Sizes

<FormGenius
  variant={{ size: "medium" }} // Global
  schema={{
    small: { type: "text", label: "Small", variant: { size: "small" } },
    large: { type: "text", label: "Large", variant: { size: "large" } },
  }}
  onSubmit={(data) => console.log(data)}
/>

Custom Buttons

<FormGenius
  schema={{ name: { type: "text", label: "Name", required: true } }}
  buttonProps={{
    submit: { style: { backgroundColor: "#10b981", color: "white" } },
  }}
  renderButtons={{
    submit: ({ onClick, label }) => (
      <button onClick={onClick} style={{ backgroundColor: "#10b981" }}>
        ✓ {label}
      </button>
    ),
  }}
  onSubmit={(data) => console.log(data)}
/>

Supported Input Types

text, email, password, number, range, date, datetime-local, time, url, tel, search, checkbox

Field Options

Basic

• type - HTML input type
• label - Field label
• required - Required field
• placeholder - Placeholder text

Validation

• min / max - Min/max value or date
• minLength / maxLength - String length
• pattern - Regex pattern
• validate - Custom validation function

Array Fields

• isArray - Enable dynamic list
• minItems / maxItems - Array size limits
• defaultItem - Default value for new items
• addButtonLabel / removeButtonLabel - Button labels

Conditional

• dependsOn - Field name to depend on
• showIf - Function to show/hide field

Styling

• className - CSS class (string or function)
• inputProps - Additional input props
• variant - Size variant: { size: "small" | "medium" | "large" }

Custom

• render - Custom render function

API Reference

<FormGenius
  schema={FormSchema} // Required
  onSubmit={(data) => void} // Required
  onError?: (error: Error) => void
  defaultValues?: Record<string, any>
  layout?: "stack" | "grid" | "two-column"
  steps?: string[][]
  showStepIndicators?: boolean
  variant?: { size?: "small" | "medium" | "large" }
  labels?: { next?: string; prev?: string; submit?: string }
  buttonProps?: { prev?: object; next?: object; submit?: object }
  renderButtons?: { prev?: function; next?: function; submit?: function }
/>

Error Handling

<FormGenius
  schema={{...}}
  onSubmit={(data) => {...}}
  onError={(error) => {
    console.error("Form error:", error);
    // Handle errors
  }}
/>

FormGenius automatically handles: null/undefined values, empty strings, whitespace trimming, NaN/Infinity, invalid dates, email/URL validation, pattern failures, and custom validation errors.

License

MIT

Happy form building! 🎉