react-dragd

A drag-and-drop page builder and viewer library for React. Build dynamic, editable pages with a visual editor that supports text, images, buttons, shapes, and code blocks.

Live Demo on StackBlitz

Features

• Dual Mode Operation - Switch between EDIT mode (full editor) and VIEW mode (read-only display)
• Drag & Drop Positioning - Move elements freely with smart alignment guides
• Multiple Component Types - Text, buttons, images, shapes, HTML/Markdown, and code blocks
• Rotation & Resize - Transform elements with corner handles and rotation controls
• Multi-Select - Shift+click or drag-to-select multiple elements
• Layer Management - Control z-index ordering (bring forward/send backward)
• Undo/Redo - Full history tracking with keyboard shortcuts
• Google Fonts - Access to all Google Fonts for text elements
• Code Editor - Monaco editor integration with syntax highlighting
• State Persistence - Save and load page layouts as JSON
• Mobile Support - Touch-friendly with responsive scaling

Installation

npm install react-dragd

Quick Start

import DragDrop from "react-dragd";
import "react-dragd/dist/index.css";

export default function App() {
  return (
    <div className="App">
      <DragDrop
        mode="edit"
        onChangedCallback={(items) => console.log('Changed:', items)}
        saveCallback={(items) => console.log('Saved:', items)}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
mode	'edit' | 'view'	'edit'	Editor mode - edit for full editor, view for read-only
initialState	object	{}	Load existing page state
onChangedCallback	function	-	Called when items are modified (debounced)
saveCallback	function	-	Called when user clicks the Save button
immutable	boolean	false	Hide the save button when true
pending	boolean	false	Show loading state

Usage Examples

Edit Mode with Auto-Save

<DragDrop
  mode="edit"
  onChangedCallback={(items) => {
    // Auto-save as user makes changes
    localStorage.setItem('page-draft', JSON.stringify(items));
  }}
  saveCallback={(items) => {
    // Save to your backend
    api.savePage(items);
  }}
/>

View Mode (Read-Only)

<DragDrop
  mode="view"
  initialState={savedPageData}
/>

Load Existing State

const savedState = JSON.parse(localStorage.getItem('my-page'));

<DragDrop
  mode="edit"
  initialState={savedState}
  saveCallback={(items) => {
    localStorage.setItem('my-page', JSON.stringify(items));
  }}
/>

Available Components

Component	Description
Text	Rich text with Google Fonts, sizing, and alignment
Button	Link buttons or JavaScript action buttons
Image	Upload images or use URLs
Square	Colored rectangles with customizable borders
Circle	Circular shapes with color fills

Custom Components

You can register custom draggable components using the component registry system.

Creating a Custom Component

import { registerComponent } from "react-dragd/dist/Components";
import EditItem from "react-dragd/dist/Components/DDEditor/EditItem";

function MyCustomComponent(props) {
  const { elemData, selected, mode } = props;

  // Optional: Define custom control panel for editing
  function PanelControls({ onLocalUpdate, elemData }) {
    return (
      <button onClick={() => onLocalUpdate({ customProp: 'new value' })}>
        Update
      </button>
    );
  }

  return (
    <EditItem
      elemData={elemData}
      selected={selected}
      renderPanel={selected && PanelControls}
      mode={mode}
    >
      {/* Your custom component content */}
      <div style={{ width: '100%', height: '100%' }}>
        {elemData.customProp || 'Default content'}
      </div>
    </EditItem>
  );
}

// Register the component with a unique type and menu button
registerComponent({
  type: 'my-custom',
  Component: MyCustomComponent,
  button: {
    icon: 'fas fa-star',
    label: 'Add My Component',
    action: 'add',
    object: {
      type: 'my-custom',
      size: { width: 150, height: 100 },
      customProp: 'initial value',
    },
  },
});

export default MyCustomComponent;

Component Props

Your custom component receives these props:

Prop	Type	Description
elemData	object	The item's data (id, pos, size, rot, zIndex, type, and any custom properties)
selected	boolean	Whether this item is currently selected
mode	'edit' | 'view'	Current editor mode

EditItem Wrapper

Wrap your component in EditItem to get drag, resize, and rotation functionality:

Prop	Type	Description
elemData	object	Pass through from props
selected	boolean	Pass through from props
mode	string	Pass through from props
renderPanel	function | false	Custom control panel component (shown when selected)
onLocalUpdate	function	Callback to update item properties

Button Configuration

The button property in registerComponent adds your component to the editor toolbar:

Property	Description
icon	Font Awesome icon class (e.g., 'fas fa-star')
label	Tooltip text shown on hover
action	Use 'add' for simple components
object	Default properties for new instances (must include type)

Registering Multiple Types

A single component can handle multiple types:

registerComponent({
  type: ['type-a', 'type-b'],
  Component: MyComponent
});

Example: HTML/Markdown Component

See docs/components/DraggableHtml.js for a full example of a custom component with Monaco editor integration for editing HTML and Markdown content.

State Format

The editor state is a JSON object where each key is an item ID:

{
  "item-uuid-123": {
    id: "item-uuid-123",
    type: "text",
    pos: { x: 100, y: 50 },
    size: { width: 200, height: 100 },
    rot: { deg: 0 },
    zIndex: 10000,
    text: "Hello World",
    style: {
      fontFamily: "Arial",
      fontSize: "24px",
      color: "#000000"
    }
  }
}

Development

Setup

# Install dependencies
npm install

# Start development (watch mode + demo server)
npm run dev

# Build for production
npm run build

Project Structure

react-dragd/
├── src/
│   ├── DragDrop.js          # Main component
│   ├── Components/          # Draggable component types
│   ├── EditMenu/            # Editor toolbar and menus
│   └── index.css            # Styles
├── docs/                    # Next.js demo app
└── dist/                    # Built output

Requirements

• React 16.8.0 or higher
• React DOM 16.8.0 or higher

License

ISC

Links

• NPM Package
• GitHub Repository
• Report Issues