Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
src		src
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsup.config.ts		tsup.config.ts

Repository files navigation

@manggala31/schema-form-react

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

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.