0
# Backend Factory
1

2
The HTML5Backend factory function creates drag and drop backend instances that integrate with React DnD's manager system, providing HTML5 native drag and drop functionality.
3

4
## Capabilities
5

6
### HTML5Backend Factory
7

8
Creates a new HTML5 backend instance configured for React DnD integration.
9

10
```typescript { .api }
11
/**
12
 * Factory function that creates HTML5Backend instances
13
 * @param manager - React DnD's drag drop manager
14
 * @param context - Optional window context (defaults to global window)
15
 * @param options - Configuration options for the backend
16
 * @returns HTML5BackendImpl instance
17
 */
18
const HTML5Backend: BackendFactory = function createBackend(
19
  manager: DragDropManager,
20
  context?: HTML5BackendContext,
21
  options?: HTML5BackendOptions,
22
): HTML5BackendImpl;
23

24
type HTML5BackendContext = Window | undefined;
25

26
interface HTML5BackendOptions {
27
  /** The root DOM node to use for subscribing to events. Default=Window */
28
  rootElement: Node;
29
}
30

31
interface HTML5BackendImpl extends Backend {
32
  /** Generate profiling statistics for the HTML5Backend */
33
  profile(): Record<string, number>;
34
  /** Setup the backend and initialize event listeners */
35
  setup(): void;
36
  /** Clean up the backend and remove event listeners */
37
  teardown(): void;
38
  /** Connect a drag source element */
39
  connectDragSource(sourceId: string, node: Element, options: any): Unsubscribe;
40
  /** Connect a drag preview element */
41
  connectDragPreview(sourceId: string, node: Element, options: any): Unsubscribe;
42
  /** Connect a drop target element */
43
  connectDropTarget(targetId: string, node: HTMLElement): Unsubscribe;
44
  /** Access to the window object used by the backend */
45
  readonly window: Window | undefined;
46
  /** Access to the document object used by the backend */
47
  readonly document: Document | undefined;
48
}
49

50
type BackendFactory = (
51
  manager: DragDropManager,
52
  context?: any,
53
  options?: any
54
) => Backend;
55

56
type Unsubscribe = () => void;
57
```
58

59
**Usage Examples:**
60

61
```typescript
62
import { DndProvider } from "react-dnd";
63
import { HTML5Backend } from "react-dnd-html5-backend";
64

65
// Basic usage with default settings
66
function App() {
67
  return (
68
    <DndProvider backend={HTML5Backend}>
69
      <YourDragDropComponents />
70
    </DndProvider>
71
  );
72
}
73

74
// With custom root element
75
const options = {
76
  rootElement: document.getElementById("custom-drag-area")
77
};
78

79
function AppWithCustomRoot() {
80
  return (
81
    <DndProvider backend={HTML5Backend} options={options}>
82
      <YourDragDropComponents />
83
    </DndProvider>
84
  );
85
}
86

87
// Access backend instance for profiling
88
import { useDragDropManager } from "react-dnd";
89

90
function ProfileComponent() {
91
  const manager = useDragDropManager();
92
  const backend = manager.getBackend();
93
  
94
  const stats = backend.profile();
95
  console.log("Backend stats:", stats);
96
  
97
  return <div>See console for backend statistics</div>;
98
}
99
```
100

101
### Backend Configuration Options
102

103
The HTML5Backend accepts configuration options to customize its behavior.
104

105
```typescript { .api }
106
interface HTML5BackendOptions {
107
  /**
108
   * The root DOM node to use for subscribing to events
109
   * Defaults to the global window object
110
   * Useful for constraining drag/drop to specific container elements
111
   */
112
  rootElement: Node;
113
}
114
```
115

116
### Context Parameter
117

118
The context parameter provides the window context for the backend to use.
119

120
```typescript { .api }
121
/**
122
 * HTML5Backend context - the window object to use for operations
123
 * Defaults to the global window if not specified
124
 * Useful for testing or iframe scenarios
125
 */
126
type HTML5BackendContext = Window | undefined;
127
```