react-drag-form-builder-dilshad/README.md

A powerful React form builder with drag-and-drop functionality and rich field types

# 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

```bash
npm install react-drag-form-builder
```

## 🚀 Quick Start

```jsx
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.

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

### FormPreview

Render a form for end-users to fill out.

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

### BuilderForm

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

```jsx
<BuilderForm />
```

## 🛠️ Advanced Usage

### Custom Field Types

```jsx
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

```jsx
<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:

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

Or import in your JavaScript:

```jsx
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](LICENSE) file for details.

## 🔗 Links

- [GitHub Repository](https://github.com/yourusername/react-drag-form-builder)
- [Issues](https://github.com/yourusername/react-drag-form-builder/issues)
- [NPM Package](https://www.npmjs.com/package/react-drag-form-builder)

## 📞 Support

If you have any questions or need help, please [open an issue](https://github.com/yourusername/react-drag-form-builder/issues) on GitHub.