React Drag Form Builder

A powerful, feature-rich React form builder with drag-and-drop functionality and rich field types. Build dynamic forms with ease using a visual interface.

✨ Features

• 🎯 Drag & Drop Interface - Intuitive form building experience
• 📝 Rich Field Types - Text, email, textarea, select, radio, checkbox, file upload, and more
• 🎨 Customizable Styling - Built with Tailwind CSS for easy customization
• 📱 Responsive Design - Works seamlessly on desktop and mobile
• 🔧 Field Settings - Comprehensive field configuration options
• 📊 Form Preview - Real-time preview of your forms
• 💾 Import/Export - Save and load form configurations
• 🔍 Form Validation - Built-in validation rules and custom validation
• 🎭 Conditional Logic - Show/hide fields based on conditions

📦 Installation

npm install react-drag-form-builder

🚀 Quick Start

import React from "react";
import { FormBuilder, FormPreview } from "react-drag-form-builder";
import "react-drag-form-builder/styles";

function App() {
  const [formData, setFormData] = React.useState(null);

  return (
    <div>
      {/* Form Builder Interface */}
      <FormBuilder onFormChange={setFormData} initialData={formData} />

      {/* Form Preview */}
      {formData && (
        <FormPreview
          formData={formData}
          onSubmit={(data) => console.log("Form submitted:", data)}
        />
      )}
    </div>
  );
}

export default App;

📚 Components

FormBuilder

The main form building interface with drag-and-drop functionality.

<FormBuilder
  initialData={formData}
  onFormChange={(data) => setFormData(data)}
  onSave={(data) => saveForm(data)}
/>

FormPreview

Render a form for end-users to fill out.

<FormPreview
  formData={formData}
  onSubmit={(submissionData) => handleSubmit(submissionData)}
  readonly={false}
/>

BuilderForm

A complete form builder with built-in sidebar and preview.

<BuilderForm />

🛠️ Advanced Usage

Custom Field Types

import { FormBuilder, createFieldDefaults } from "react-drag-form-builder";

// Create custom field defaults
const customField = createFieldDefaults("custom", "My Custom Field");

// Use with FormBuilder
<FormBuilder
  initialData={{
    fields: [customField],
  }}
/>;

Form Validation

<FormPreview
  formData={formData}
  validation={{
    required: ["email", "name"],
    patterns: {
      email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    },
  }}
  onSubmit={handleSubmit}
  onValidationError={(errors) => console.log("Validation errors:", errors)}
/>

🎨 Styling

The package includes default Tailwind CSS styles. Import them in your main CSS file:

@import "react-drag-form-builder/styles";

Or import in your JavaScript:

import "react-drag-form-builder/styles";

🔧 API Reference

Hooks

• useFormBuilder() - Hook for form builder state management
• useFormPreview() - Hook for form preview functionality

Utilities

• createFieldDefaults(type, label) - Create default field configuration
• createRegistrationFormDemo() - Generate demo form data

Components

• FormBuilder - Main form builder interface
• FormPreview - Form rendering and submission
• FormField - Individual form field component
• FieldSettingsDrawer - Field configuration panel
• FormHeader / FormFooter - Form layout components

📋 Supported Field Types

• Text Input
• Email Input
• Textarea
• Select Dropdown
• Radio Buttons
• Checkboxes
• File Upload
• Number Input
• Date Picker
• Time Picker
• Rating
• Slider
• Rich Text Editor

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see the LICENSE file for details.

🔗 Links

• GitHub Repository
• Issues
• NPM Package

📞 Support

If you have any questions or need help, please open an issue on GitHub.