0
# Native Drag Sources
1

2
Support for native HTML5 drag source types including files, URLs, text, and HTML content. These constants enable React DnD components to handle drag operations from external sources like the operating system or other applications.
3

4
## Capabilities
5

6
### Native Type Constants
7

8
Constants representing the four native HTML5 drag source types supported by the backend.
9

10
```typescript { .api }
11
/**
12
 * Native HTML5 drag source type constants
13
 * These are used to identify different types of external drag sources
14
 */
15
namespace NativeTypes {
16
  /** Constant for file drag operations from the file system */
17
  const FILE: "__NATIVE_FILE__";
18
  /** Constant for URL/link drag operations from browsers or applications */
19
  const URL: "__NATIVE_URL__";
20
  /** Constant for text drag operations */
21
  const TEXT: "__NATIVE_TEXT__";
22
  /** Constant for HTML content drag operations */
23
  const HTML: "__NATIVE_HTML__";
24
}
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
import { useDrop } from "react-dnd";
31
import { NativeTypes } from "react-dnd-html5-backend";
32

33
// Accept file drops
34
function FileDropZone() {
35
  const [{ isOver }, drop] = useDrop({
36
    accept: NativeTypes.FILE,
37
    drop: (item: { files: File[] }) => {
38
      console.log("Files dropped:", item.files);
39
    },
40
    collect: (monitor) => ({
41
      isOver: monitor.isOver(),
42
    }),
43
  });
44

45
  return (
46
    <div ref={drop} style={{ background: isOver ? "lightblue" : "white" }}>
47
      Drop files here
48
    </div>
49
  );
50
}
51

52
// Accept URL drops
53
function URLDropZone() {
54
  const [{ isOver }, drop] = useDrop({
55
    accept: NativeTypes.URL,
56
    drop: (item: { urls: string[] }) => {
57
      console.log("URLs dropped:", item.urls);
58
    },
59
    collect: (monitor) => ({
60
      isOver: monitor.isOver(),
61
    }),
62
  });
63

64
  return (
65
    <div ref={drop} style={{ background: isOver ? "lightgreen" : "white" }}>
66
      Drop URLs here
67
    </div>
68
  );
69
}
70

71
// Accept text drops
72
function TextDropZone() {
73
  const [{ isOver }, drop] = useDrop({
74
    accept: NativeTypes.TEXT,
75
    drop: (item: { text: string }) => {
76
      console.log("Text dropped:", item.text);
77
    },
78
    collect: (monitor) => ({
79
      isOver: monitor.isOver(),
80
    }),
81
  });
82

83
  return (
84
    <div ref={drop} style={{ background: isOver ? "lightyellow" : "white" }}>
85
      Drop text here
86
    </div>
87
  );
88
}
89

90
// Accept multiple native types
91
function MultiTypeDropZone() {
92
  const [{ isOver, canDrop }, drop] = useDrop({
93
    accept: [NativeTypes.FILE, NativeTypes.URL, NativeTypes.TEXT, NativeTypes.HTML],
94
    drop: (item: any, monitor) => {
95
      const itemType = monitor.getItemType();
96
      
97
      switch (itemType) {
98
        case NativeTypes.FILE:
99
          console.log("Files:", item.files);
100
          break;
101
        case NativeTypes.URL:
102
          console.log("URLs:", item.urls);
103
          break;
104
        case NativeTypes.TEXT:
105
          console.log("Text:", item.text);
106
          break;
107
        case NativeTypes.HTML:
108
          console.log("HTML:", item.html);
109
          break;
110
      }
111
    },
112
    collect: (monitor) => ({
113
      isOver: monitor.isOver(),
114
      canDrop: monitor.canDrop(),
115
    }),
116
  });
117

118
  return (
119
    <div 
120
      ref={drop} 
121
      style={{ 
122
        background: isOver && canDrop ? "lightcoral" : "white",
123
        minHeight: "100px",
124
        border: "2px dashed #ccc"
125
      }}
126
    >
127
      Drop files, URLs, text, or HTML here
128
    </div>
129
  );
130
}
131
```
132

133
## Native Type Data Formats
134

135
Each native type provides different data formats when dropped:
136

137
- **FILE**: Provides `{ files: File[] }` with array of File objects
138
- **URL**: Provides `{ urls: string[] }` with array of URL strings  
139
- **TEXT**: Provides `{ text: string }` with plain text content
140
- **HTML**: Provides `{ html: string }` with HTML content as string