0
# Context and Provider
1

2
Core context and provider components for setting up React DnD in your application. The DndProvider must wrap any components that use React DnD hooks.
3

4
## Capabilities
5

6
### DndProvider
7

8
The main provider component that enables React DnD functionality throughout your component tree.
9

10
```typescript { .api }
11
/**
12
 * A React component that provides the React-DnD context
13
 * @param props - Provider configuration with backend or manager
14
 * @returns React element wrapping children with DnD context  
15
 */
16
function DndProvider<BackendContext, BackendOptions>(
17
  props: DndProviderProps<BackendContext, BackendOptions>
18
): React.ReactElement;
19

20
type DndProviderProps<BackendContext, BackendOptions> =
21
  | {
22
      children?: React.ReactNode;
23
      manager: DragDropManager;
24
    }
25
  | {
26
      backend: BackendFactory;
27
      children?: React.ReactNode;
28
      context?: BackendContext;
29
      options?: BackendOptions;
30
      debugMode?: boolean;
31
    };
32
```
33

34
**Usage Examples:**
35

36
```typescript
37
import React from "react";
38
import { DndProvider } from "react-dnd";
39
import { HTML5Backend } from "react-dnd-html5-backend";
40

41
// Basic usage with HTML5 backend
42
function App() {
43
  return (
44
    <DndProvider backend={HTML5Backend}>
45
      <MyDragDropComponents />
46
    </DndProvider>
47
  );
48
}
49

50
// With custom options
51
function AppWithOptions() {
52
  return (
53
    <DndProvider 
54
      backend={HTML5Backend} 
55
      options={{ enableMouseEvents: true }}
56
      debugMode={process.env.NODE_ENV === 'development'}
57
    >
58
      <MyDragDropComponents />
59
    </DndProvider>
60
  );
61
}
62

63
// With custom manager (advanced usage)
64
import { createDragDropManager } from "dnd-core";
65

66
function AppWithCustomManager() {
67
  const manager = createDragDropManager(HTML5Backend);
68
  
69
  return (
70
    <DndProvider manager={manager}>
71
      <MyDragDropComponents />
72
    </DndProvider>
73
  );
74
}
75
```
76

77
### DndContext
78

79
The React context that provides access to the DragDropManager instance.
80

81
```typescript { .api }
82
/**
83
 * The React context type for drag and drop functionality
84
 */
85
interface DndContextType {
86
  dragDropManager: DragDropManager | undefined;
87
}
88

89
/**
90
 * React Context for accessing the drag drop manager
91
 */
92
const DndContext: React.Context<DndContextType>;
93
```
94

95
**Usage Example:**
96

97
```typescript
98
import React, { useContext } from "react";
99
import { DndContext } from "react-dnd";
100

101
function MyComponent() {
102
  const { dragDropManager } = useContext(DndContext);
103
  
104
  // Advanced usage - typically not needed for normal usage
105
  if (dragDropManager) {
106
    const monitor = dragDropManager.getMonitor();
107
    // ... advanced monitor operations
108
  }
109
  
110
  return <div>My Component</div>;
111
}
112
```
113

114
### useDragDropManager
115

116
Low-level hook for accessing the DragDropManager instance directly.
117

118
```typescript { .api }
119
/**
120
 * A hook to retrieve the DragDropManager from Context
121
 * @returns DragDropManager instance
122
 * @throws Error if used outside DndProvider
123
 */
124
function useDragDropManager(): DragDropManager;
125
```
126

127
**Usage Example:**
128

129
```typescript
130
import React from "react";
131
import { useDragDropManager } from "react-dnd";
132

133
function AdvancedComponent() {
134
  const manager = useDragDropManager();
135
  const monitor = manager.getMonitor();
136
  
137
  // Advanced monitoring capabilities
138
  React.useEffect(() => {
139
    const unsubscribe = monitor.subscribeToStateChange(() => {
140
      console.log("Drag state changed");
141
    });
142
    
143
    return unsubscribe;
144
  }, [monitor]);
145
  
146
  return <div>Advanced DnD Component</div>;
147
}
148
```
149

150
## Backend Integration
151

152
React DnD uses a pluggable backend system. Common backends include (note: these are separate npm packages):
153

154
- **HTML5Backend**: For desktop browsers with native HTML5 drag and drop (from `react-dnd-html5-backend`)
155
- **TouchBackend**: For mobile devices with touch interactions (from `react-dnd-touch-backend`)
156
- **TestBackend**: For testing environments (from `react-dnd-test-backend`)
157

158
```typescript
159
// Note: These are separate packages that need to be installed
160
import { HTML5Backend } from "react-dnd-html5-backend";
161
import { TouchBackend } from "react-dnd-touch-backend";
162
import { TestBackend } from "react-dnd-test-backend";
163

164
// Choose backend based on environment
165
const backend = typeof window !== 'undefined' && 'ontouchstart' in window 
166
  ? TouchBackend 
167
  : HTML5Backend;
168

169
function App() {
170
  return (
171
    <DndProvider backend={backend}>
172
      <MyApp />
173
    </DndProvider>
174
  );
175
}
176
```