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';constformSchema={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",},],};exportdefaultfunctionMyFormPage(){consthandleSubmit=(data: any)=>{console.log("Form Data:",data);};return<JsonDynamicFormschema={formSchema}onSubmit={handleSubmit}/>;}

---

📘 JSON Schema Format

interfaceJsonFormSchema{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, radiodefaultValue?: 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