jsonDynamicForm

A lightweight and flexible React form builder powered by JSON, React Hook Form, Zod, and ShadCN.

---

✨ Features

• 📄 JSON-based form configuration
• ⚙️ Built on React Hook Form
• 🛡️ Zod validation
• 🎨 Beautiful UI with ShadCN
• 🔁 Dynamic field rendering
• 🧩 Supports custom components

---

🚀 Installation

npm install jsonDynamicForm react-hook-form zod

or

yarn add jsonDynamicForm react-hook-form zod

---

📦 Basic Usage

import { JsonDynamicForm } from 'jsonDynamicForm';

const formSchema = {
  title: "User Info",
  fields: [
    {
      type: "text",
      name: "firstName",
      label: "First Name",
      required: true,
    },
    {
      type: "email",
      name: "email",
      label: "Email Address",
      required: true,
    },
    {
      type: "number",
      name: "age",
      label: "Age",
    },
  ],
};

export default function MyFormPage() {
  const handleSubmit = (data: any) => {
    console.log("Form Data:", data);
  };

  return <JsonDynamicForm schema={formSchema} onSubmit={handleSubmit} />;
}

---

📘 JSON Schema Format

interface JsonFormSchema {
  title?: string;
  fields: {
    name: string;
    type:
      | 'text'
      | 'number'
      | 'email'
      | 'password'
      | 'select'
      | 'checkbox'
      | 'radio'
      | 'textarea';
    label: string;
    required?: boolean;
    options?: { label: string; value: any }[]; // for select, radio
    defaultValue?: any;
    placeholder?: string;
  }[];
}

---

💡 Roadmap

• JSON field schema support
• Zod validation
• Integrate with ShadCN components
• Custom field renderer support
• Conditional fields
• Grouped sections
• Async data for select fields
• Drag-and-drop form builder (future)
• Playground & UI config editor

---

🛠️ Contributing

We welcome contributions! Please check the CONTRIBUTING.md for how to get started.

To run the project locally:

git clone https://github.com/your-username/jsonDynamicForm.git
cd jsonDynamicForm
npm install
npm run dev

---

📄 License

MIT © Your Name