🧱 Form Builder

A dynamic form builder built with React and TypeScript that allows users to create and manage custom form fields in real-time using a centralized state store.

🚀 Features

• ➕ Add fields dynamically (text, number, textarea, date, etc.)
• 🗑️ Remove or update individual fields
• 🔄 Reset form with one click
• 🧠 Centralized state management using useFormStore (e.g., Zustand)
• 📦 Component-based architecture
• 🎨 Styled with Tailwind CSS
• 🔐 Type-safe using TypeScript

🛠 Tech Stack

• React (with Hooks)
• TypeScript
• Zustand or any state management via useFormStore
• Tailwind CSS

📦 Installation

git clone https://github.com/Kelsen23/react-form-builder.git
cd react-form-builder
npm install
npm run dev

🧪 How It Works

🧩 Adding a Field

The FormBuilder component manages a local newField state. Here's the process:

1. User types a label (e.g., "Email").
2. Selects a field type (e.g., text, number, date, etc.).
3. Clicks the Add Field button.
4. The field is added to the global store using addField() from useFormStore.

🛠 Managing Fields

Each form field is rendered using the FormField component, which allows:

• 📝 Inline editing: Users can modify the label, value, or type.
• ♻️ Updating: Changes trigger updateField(index, updatedField).
• ❌ Removing: Clicking remove calls removeField(index).

🔁 Resetting the Form

• Clicking the Reset Form button calls resetForm() from the store.
• This clears all fields and resets the builder to its initial state.

🤝 Contributing

PRs and suggestions are welcome! Open an issue or fork the project to get started.

📜 License

MIT