0
# Status Components
1

2
Status components provide conditional rendering based on the current dropzone state, allowing for dynamic visual feedback during drag-and-drop interactions.
3

4
## Capabilities
5

6
### DropzoneAccept
7

8
Shows children only when the dropzone is in the accept state (valid files are being dragged over).
9

10
```typescript { .api }
11
/**
12
 * Renders children only when dropzone is in accept state
13
 * @param props - Component props containing children
14
 * @returns React component that conditionally renders on accept state
15
 */
16
interface DropzoneAcceptProps {
17
  /** Content to show when files are accepted */
18
  children: React.ReactNode;
19
}
20

21
const DropzoneAccept: React.FC<DropzoneAcceptProps>;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { Dropzone } from "@mantine/dropzone";
28

29
function AcceptExample() {
30
  return (
31
    <Dropzone onDrop={(files) => console.log(files)}>
32
      <Dropzone.Accept>
33
        <Text color="green">Drop files here!</Text>
34
      </Dropzone.Accept>
35
    </Dropzone>
36
  );
37
}
38

39
// With complex content
40
function ComplexAcceptExample() {
41
  return (
42
    <Dropzone onDrop={(files) => console.log(files)}>
43
      <Dropzone.Accept>
44
        <div style={{ textAlign: 'center' }}>
45
          <IconUpload size={50} color="green" />
46
          <Text size="lg" color="green">Drop files to upload</Text>
47
          <Text size="sm" color="dimmed">Files will be processed immediately</Text>
48
        </div>
49
      </Dropzone.Accept>
50
    </Dropzone>
51
  );
52
}
53
```
54

55
### DropzoneIdle
56

57
Shows children only when the dropzone is in the idle state (no drag interaction occurring).
58

59
```typescript { .api }
60
/**
61
 * Renders children only when dropzone is in idle state
62
 * @param props - Component props containing children
63
 * @returns React component that conditionally renders on idle state
64
 */
65
interface DropzoneIdleProps {
66
  /** Content to show when dropzone is idle */
67
  children: React.ReactNode;
68
}
69

70
const DropzoneIdle: React.FC<DropzoneIdleProps>;
71
```
72

73
**Usage Examples:**
74

75
```typescript
76
import { Dropzone } from "@mantine/dropzone";
77

78
function IdleExample() {
79
  return (
80
    <Dropzone onDrop={(files) => console.log(files)}>
81
      <Dropzone.Idle>
82
        <Text>Drag files here or click to select</Text>
83
      </Dropzone.Idle>
84
    </Dropzone>
85
  );
86
}
87

88
// With detailed instructions
89
function DetailedIdleExample() {
90
  return (
91
    <Dropzone onDrop={(files) => console.log(files)}>
92
      <Dropzone.Idle>
93
        <div style={{ textAlign: 'center' }}>
94
          <IconCloudUpload size={50} color="gray" />
95
          <Text size="lg">Upload files</Text>
96
          <Text size="sm" color="dimmed">
97
            Drag and drop files here or click to browse
98
          </Text>
99
          <Text size="xs" color="dimmed">
100
            Supports: Images, PDFs, Documents (max 10MB each)
101
          </Text>
102
        </div>
103
      </Dropzone.Idle>
104
    </Dropzone>
105
  );
106
}
107
```
108

109
### DropzoneReject
110

111
Shows children only when the dropzone is in the reject state (invalid files are being dragged over).
112

113
```typescript { .api }
114
/**
115
 * Renders children only when dropzone is in reject state
116
 * @param props - Component props containing children
117
 * @returns React component that conditionally renders on reject state
118
 */
119
interface DropzoneRejectProps {
120
  /** Content to show when files are rejected */
121
  children: React.ReactNode;
122
}
123

124
const DropzoneReject: React.FC<DropzoneRejectProps>;
125
```
126

127
**Usage Examples:**
128

129
```typescript
130
import { Dropzone } from "@mantine/dropzone";
131

132
function RejectExample() {
133
  return (
134
    <Dropzone 
135
      onDrop={(files) => console.log(files)}
136
      accept={['image/*']}
137
    >
138
      <Dropzone.Reject>
139
        <Text color="red">Only images are allowed</Text>
140
      </Dropzone.Reject>
141
    </Dropzone>
142
  );
143
}
144

145
// With detailed error information
146
function DetailedRejectExample() {
147
  return (
148
    <Dropzone 
149
      onDrop={(files) => console.log(files)}
150
      accept={['image/*']}
151
      maxSize={5 * 1024 * 1024} // 5MB
152
    >
153
      <Dropzone.Reject>
154
        <div style={{ textAlign: 'center' }}>
155
          <IconX size={50} color="red" />
156
          <Text size="lg" color="red">Invalid files</Text>
157
          <Text size="sm" color="red">
158
            Only images under 5MB are accepted
159
          </Text>
160
        </div>
161
      </Dropzone.Reject>
162
    </Dropzone>
163
  );
164
}
165
```
166

167
### Combined Status Usage
168

169
All status components are typically used together to provide comprehensive visual feedback:
170

171
```typescript { .api }
172
function ComprehensiveDropzone() {
173
  return (
174
    <Dropzone 
175
      onDrop={(files) => console.log('Accepted:', files)}
176
      onReject={(files) => console.log('Rejected:', files)}
177
      accept={['image/*', 'application/pdf']}
178
      maxSize={10 * 1024 * 1024} // 10MB
179
    >
180
      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
181
        <Dropzone.Accept>
182
          <div style={{ textAlign: 'center' }}>
183
            <IconUpload size={52} stroke={1.5} />
184
            <Text size="xl" inline>
185
              Drop files here
186
            </Text>
187
          </div>
188
        </Dropzone.Accept>
189

190
        <Dropzone.Reject>
191
          <div style={{ textAlign: 'center' }}>
192
            <IconX size={52} stroke={1.5} />
193
            <Text size="xl" inline>
194
              Invalid file type or size
195
            </Text>
196
          </div>
197
        </Dropzone.Reject>
198

199
        <Dropzone.Idle>
200
          <div style={{ textAlign: 'center' }}>
201
            <IconPhoto size={52} stroke={1.5} />
202
            <Text size="xl" inline>
203
              Upload images or PDFs
204
            </Text>
205
            <Text size="sm" color="dimmed" inline mt={7}>
206
              Attach files by dragging them here or clicking to browse
207
            </Text>
208
          </div>
209
        </Dropzone.Idle>
210
      </Group>
211
    </Dropzone>
212
  );
213
}
214
```
215

216
## Context Integration
217

218
Status components use React context to access the current dropzone state:
219

220
```typescript { .api }
221
interface DropzoneContextValue {
222
  idle: boolean;
223
  accept: boolean;
224
  reject: boolean;
225
}
226

227
const useDropzoneContext: () => DropzoneContextValue;
228
```
229

230
The status components internally use this context to determine whether to render their children based on the current dropzone state.
231

232
## Implementation Details
233

234
Status components are created using a factory function that generates components based on the specific status type. They automatically handle the conditional rendering logic and integrate with Mantine's component system for consistent prop handling and display names.