0
# React DnD HTML5 Backend
1

2
The React DnD HTML5 Backend provides the HTML5 drag and drop implementation for React DnD, enabling web applications to implement sophisticated drag-and-drop interactions using the native HTML5 Drag and Drop API. It serves as the core backend that handles browser-specific drag and drop events, manages drop zones and drag sources, and provides utilities for drag preview customization.
3

4
## Package Information
5

6
- **Package Name**: react-dnd-html5-backend
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-dnd-html5-backend`
10

11
## Core Imports
12

13
```typescript
14
import { HTML5Backend, getEmptyImage, NativeTypes } from "react-dnd-html5-backend";
15
import type { HTML5BackendOptions, HTML5BackendContext } from "react-dnd-html5-backend";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const { HTML5Backend, getEmptyImage, NativeTypes } = require("react-dnd-html5-backend");
22
```
23

24
## Basic Usage
25

26
```typescript
27
import { DndProvider } from "react-dnd";
28
import { HTML5Backend } from "react-dnd-html5-backend";
29

30
// Basic setup with default options
31
function App() {
32
  return (
33
    <DndProvider backend={HTML5Backend}>
34
      {/* Your drag and drop components */}
35
    </DndProvider>
36
  );
37
}
38

39
// With custom options
40
const backendOptions = {
41
  rootElement: document.getElementById("drag-drop-container")
42
};
43

44
function AppWithOptions() {
45
  return (
46
    <DndProvider backend={HTML5Backend} options={backendOptions}>
47
      {/* Your drag and drop components */}
48
    </DndProvider>
49
  );
50
}
51
```
52

53
## Architecture
54

55
The HTML5 Backend is built around several key components:
56

57
- **Backend Factory**: The `HTML5Backend` function creates backend instances configured for React DnD
58
- **Backend Implementation**: `HTML5BackendImpl` class handles all drag/drop event management and DOM interactions
59
- **Native Type Support**: Built-in support for files, URLs, text, and HTML drag sources through `NativeTypes`
60
- **Drag Preview Utilities**: Empty image creation for custom drag preview implementations
61
- **Event Management**: Comprehensive event listener lifecycle management with cleanup
62

63
## Capabilities
64

65
### Backend Factory
66

67
Core factory function for creating HTML5 drag and drop backend instances that integrate with React DnD.
68

69
```typescript { .api }
70
const HTML5Backend: BackendFactory = function createBackend(
71
  manager: DragDropManager,
72
  context?: HTML5BackendContext,
73
  options?: HTML5BackendOptions,
74
): HTML5BackendImpl;
75

76
type HTML5BackendContext = Window | undefined;
77

78
interface HTML5BackendOptions {
79
  /** The root DOM node to use for subscribing to events. Default=Window */
80
  rootElement: Node;
81
}
82
```
83

84
[Backend Factory](./backend-factory.md)
85

86
### Native Drag Sources
87

88
Built-in support for native HTML5 drag source types including files, URLs, text, and HTML content.
89

90
```typescript { .api }
91
namespace NativeTypes {
92
  const FILE: "__NATIVE_FILE__";
93
  const URL: "__NATIVE_URL__";
94
  const TEXT: "__NATIVE_TEXT__";
95
  const HTML: "__NATIVE_HTML__";
96
}
97
```
98

99
[Native Drag Sources](./native-drag-sources.md)
100

101
### Drag Preview Utilities
102

103
Utilities for customizing drag preview behavior, including empty image creation for custom drag previews.
104

105
```typescript { .api }
106
function getEmptyImage(): HTMLImageElement;
107
```
108

109
[Drag Preview Utilities](./drag-preview-utils.md)
110

111

112
## Core Types
113

114
```typescript { .api }
115
interface Backend {
116
  setup(): void;
117
  teardown(): void;
118
  connectDragSource(sourceId: string, node: Element, options: any): Unsubscribe;
119
  connectDragPreview(sourceId: string, node: Element, options: any): Unsubscribe;
120
  connectDropTarget(targetId: string, node: HTMLElement): Unsubscribe;
121
  profile(): Record<string, number>;
122
}
123

124
type BackendFactory = (
125
  manager: DragDropManager,
126
  context?: any,
127
  options?: any
128
) => Backend;
129

130
type Unsubscribe = () => void;
131
```