@manggala31/schema-form-react

Production-ready, JSON Schema-driven dynamic form generator component for React, Laravel Inertia.js, and Next.js applications.

Table of Contents

• Overview
• Key Features
• Installation
• Quick Start
• Framework Integrations
  • Laravel Inertia.js (React)
  • Next.js (App Router)
• API Reference
  • SchemaForm Props
  • FormFieldSchema Interface
• Styling & Custom Themes
• License

Overview

@manggala31/schema-form-react is a declarative form generator component. It accepts JSON schema definitions and automatically renders typed input controls (text, number, select, toggle, textarea, radio, and checkboxes) with client-side validation, error message propagation, and customizable layout grids. It pairs directly with server-driven config engines (such as manggala/laravel-settings).

Key Features

• Declarative JSON Schema Rendering: Pass JSON field specifications to instantly render complete HTML forms.
• Built-in Validation: Supports required fields, regex pattern matching, min/max limits, and custom validator functions.
• Rich Input Controls: Renders text, number, email, password, textarea, select dropdowns, radio groups, checkboxes, and toggle switches.
• Controlled State Management: Emits value change maps and submit payloads with clean type safety.
• Zero Heavy Dependencies: Lightweight footprint, optimized for React 18, React 19, Next.js, and Inertia.js.

Installation

# Using npm
npm install @manggala31/schema-form-react

# Using yarn
yarn add @manggala31/schema-form-react

# Using pnpm
pnpm add @manggala31/schema-form-react

# Using bun
bun add @manggala31/schema-form-react

Quick Start

import React from 'react';
import { SchemaForm, FormFieldSchema } from '@manggala31/schema-form-react';
import '@manggala31/schema-form-react/styles.css';

const formSchema: FormFieldSchema[] = [
  {
    name: 'siteName',
    label: 'Application Title',
    type: 'text',
    placeholder: 'Enter application name',
    required: true,
  },
  {
    name: 'environment',
    label: 'Environment',
    type: 'select',
    options: [
      { label: 'Production', value: 'production' },
      { label: 'Staging', value: 'staging' },
      { label: 'Development', value: 'development' },
    ],
    required: true,
  },
  {
    name: 'maintenanceMode',
    label: 'Enable Maintenance Mode',
    type: 'toggle',
    description: 'Temporarily disable public access',
  },
  {
    name: 'maxConnections',
    label: 'Max DB Connections',
    type: 'number',
    min: 5,
    max: 500,
  },
];

export default function SettingsPage() {
  const handleSubmit = (values: Record<string, any>) => {
    console.log('Submitted form values:', values);
  };

  return (
    <div className="container">
      <h1>System Settings</h1>
      <SchemaForm
        schema={formSchema}
        initialValues={{ siteName: 'My App', environment: 'production' }}
        onSubmit={handleSubmit}
        submitText="Save Settings"
      />
    </div>
  );
}

API Reference

<SchemaForm> Props

| Prop | Type | Default | Description | |---|---|---|---| | schema | FormFieldSchema[] | Required | Array of JSON field schemas. | | initialValues | Record<string, any> | {} | Initial form values mapping. | | onSubmit | (values: Record<string, any>) => void | Required | Callback invoked on valid form submission. | | submitText | string | 'Submit' | Text label for the submit button. | | className | string | '' | Custom form container CSS class. |

License

MIT License © Ilham Hatta Manggala