0
# Toast Container
1

2
The ToastContainer is the main React component that renders and manages toast notifications. It provides extensive configuration options for positioning, styling, interaction behavior, and animation settings.
3

4
## Capabilities
5

6
### ToastContainer Component
7

8
Main container component that must be added to your React app to display toast notifications.
9

10
```typescript { .api }
11
/**
12
 * Main container component for rendering toast notifications
13
 * @param props - Configuration props for the container
14
 * @returns JSX.Element - The toast container
15
 */
16
function ToastContainer(props: ToastContainerProps): JSX.Element;
17

18
interface ToastContainerProps {
19
  // Positioning and Layout
20
  position?: ToastPosition;
21
  stacked?: boolean;
22
  newestOnTop?: boolean;
23
  
24
  // Auto-close and Timing
25
  autoClose?: number | false;
26
  hideProgressBar?: boolean;
27
  closeButton?: boolean | ((props: CloseButtonProps) => React.ReactNode);
28
  
29
  // Interaction
30
  closeOnClick?: boolean;
31
  pauseOnHover?: boolean;
32
  pauseOnFocusLoss?: boolean;
33
  draggable?: boolean;
34
  draggablePercent?: number;
35
  draggableDirection?: DraggableDirection;
36
  
37
  // Styling and Theming
38
  theme?: Theme;
39
  transition?: ToastTransition;
40
  rtl?: boolean;
41
  toastClassName?: ToastClassName;
42
  bodyClassName?: ToastClassName;
43
  style?: React.CSSProperties;
44
  toastStyle?: React.CSSProperties;
45
  className?: string;
46
  
47
  // Queue and Limits
48
  limit?: number;
49
  enableMultiContainer?: boolean;
50
  containerId?: Id;
51
  
52
  // Icons and Components
53
  icon?: ToastIcon;
54
  
55
  // Progress Bar Styling
56
  progressClassName?: ToastClassName;
57
  
58
  // Accessibility
59
  role?: string;
60
  rtl?: boolean;
61
  hotKeys?: (e: KeyboardEvent) => boolean;
62
  'aria-label'?: string;
63
  
64
  // Event Handlers
65
  onOpen?: (props: ToastContentProps) => void;
66
  onClose?: (props: ToastContentProps) => void;
67
  onClick?: (event: React.MouseEvent) => void;
68
  
69
  // Advanced Features
70
  delay?: number;
71
}
72
```
73

74
**Basic Usage:**
75

76
```typescript
77
import React from 'react';
78
import { ToastContainer } from 'react-toastify';
79

80
function App() {
81
  return (
82
    <div>
83
      {/* Your app content */}
84
      <ToastContainer />
85
    </div>
86
  );
87
}
88
```
89

90
**Advanced Configuration:**
91

92
```typescript
93
import { ToastContainer, Slide } from 'react-toastify';
94

95
function App() {
96
  return (
97
    <div>
98
      {/* Your app content */}
99
      <ToastContainer
100
        position="top-right"
101
        autoClose={5000}
102
        hideProgressBar={false}
103
        newestOnTop={false}
104
        closeOnClick
105
        rtl={false}
106
        pauseOnFocusLoss
107
        draggable
108
        pauseOnHover
109
        theme="light"
110
        transition={Slide}
111
      />
112
    </div>
113
  );
114
}
115
```
116

117
### Positioning Options
118

119
Control where toasts appear on the screen.
120

121
```typescript { .api }
122
type ToastPosition =
123
  | 'top-left'
124
  | 'top-right' 
125
  | 'top-center'
126
  | 'bottom-left'
127
  | 'bottom-right'
128
  | 'bottom-center';
129
```
130

131
**Usage Examples:**
132

133
```typescript
134
// Top right corner (default)
135
<ToastContainer position="top-right" />
136

137
// Bottom center
138
<ToastContainer position="bottom-center" />
139

140
// Top left corner
141
<ToastContainer position="top-left" />
142
```
143

144
### Theming Options
145

146
Built-in theme support with custom theming capability.
147

148
```typescript { .api }
149
type Theme = 'light' | 'dark' | 'colored' | string;
150
```
151

152
**Usage Examples:**
153

154
```typescript
155
// Light theme (default)
156
<ToastContainer theme="light" />
157

158
// Dark theme
159
<ToastContainer theme="dark" />
160

161
// Colored theme (colorful backgrounds)
162
<ToastContainer theme="colored" />
163

164
// Custom theme (CSS class name)
165
<ToastContainer theme="my-custom-theme" />
166
```
167

168
### Auto-close Configuration
169

170
Control automatic dismissal of toasts.
171

172
```typescript { .api }
173
// Auto-close after specified milliseconds, or disable with false
174
autoClose?: number | false;
175

176
// Hide the progress bar
177
hideProgressBar?: boolean;
178
```
179

180
**Usage Examples:**
181

182
```typescript
183
// Auto-close after 3 seconds
184
<ToastContainer autoClose={3000} />
185

186
// Disable auto-close
187
<ToastContainer autoClose={false} />
188

189
// Hide progress bar
190
<ToastContainer hideProgressBar />
191

192
// Show progress bar (default)
193
<ToastContainer hideProgressBar={false} />
194
```
195

196
### Interaction Settings
197

198
Configure user interaction behaviors.
199

200
```typescript { .api }
201
// Click to close
202
closeOnClick?: boolean;
203

204
// Pause on hover
205
pauseOnHover?: boolean;
206

207
// Pause when window loses focus
208
pauseOnFocusLoss?: boolean;
209

210
// Enable drag to dismiss
211
draggable?: boolean;
212

213
// Percentage of drag needed to dismiss (0-100)
214
draggablePercent?: number;
215

216
// Drag direction
217
draggableDirection?: DraggableDirection;
218
```
219

220
**Usage Examples:**
221

222
```typescript
223
// Full interaction configuration
224
<ToastContainer
225
  closeOnClick
226
  pauseOnHover
227
  pauseOnFocusLoss
228
  draggable
229
  draggablePercent={80}
230
  draggableDirection="x"
231
/>
232

233
// Minimal interaction
234
<ToastContainer
235
  closeOnClick={false}
236
  pauseOnHover={false}
237
  draggable={false}
238
/>
239
```
240

241
### Queue Management
242

243
Control toast queue behavior and limits.
244

245
```typescript { .api }
246
// Maximum number of toasts to display
247
limit?: number;
248

249
// Stack toasts vertically (new feature)
250
stacked?: boolean;
251

252
// Show newest toasts on top
253
newestOnTop?: boolean;
254

255
// Enable multiple containers
256
enableMultiContainer?: boolean;
257

258
// Container identifier for multiple containers
259
containerId?: Id;
260
```
261

262
**Usage Examples:**
263

264
```typescript
265
// Limit to 3 toasts
266
<ToastContainer limit={3} />
267

268
// Stack toasts
269
<ToastContainer stacked />
270

271
// Oldest toasts on top
272
<ToastContainer newestOnTop={false} />
273

274
// Multiple containers
275
<ToastContainer containerId="main" enableMultiContainer />
276
<ToastContainer containerId="sidebar" enableMultiContainer />
277
```
278

279
### Custom Styling
280

281
Customize appearance with CSS classes and styles.
282

283
```typescript { .api }
284
// CSS class for individual toasts
285
toastClassName?: ToastClassName;
286

287
// CSS class for toast body content
288
bodyClassName?: ToastClassName;
289

290
// Container styles
291
style?: React.CSSProperties;
292

293
// Individual toast styles
294
toastStyle?: React.CSSProperties;
295

296
// Container CSS class
297
className?: string;
298

299
type ToastClassName = string | ((context?: {
300
  type?: TypeOptions;
301
  defaultClassName?: string;
302
  position?: ToastPosition;
303
  rtl?: boolean;
304
}) => string);
305
```
306

307
**Usage Examples:**
308

309
```typescript
310
// Static CSS classes
311
<ToastContainer 
312
  className="my-toast-container"
313
  toastClassName="my-toast"
314
  bodyClassName="my-toast-body"
315
/>
316

317
// Dynamic CSS classes
318
<ToastContainer
319
  toastClassName={({ type, defaultClassName }) => 
320
    `${defaultClassName} my-toast--${type}`
321
  }
322
/>
323

324
// Inline styles
325
<ToastContainer
326
  style={{ fontSize: '14px' }}
327
  toastStyle={{ backgroundColor: '#f0f0f0' }}
328
/>
329
```
330

331
### Close Button Customization
332

333
Customize or disable the close button.
334

335
```typescript { .api }
336
// Boolean to show/hide default close button, or custom component
337
closeButton?: boolean | ((props: CloseButtonProps) => React.ReactNode);
338

339
interface CloseButtonProps {
340
  closeToast: (e: React.MouseEvent<HTMLElement>) => void;
341
  type: TypeOptions;
342
  ariaLabel?: string;
343
  theme: Theme;
344
}
345
```
346

347
**Usage Examples:**
348

349
```typescript
350
// Hide close button
351
<ToastContainer closeButton={false} />
352

353
// Show default close button
354
<ToastContainer closeButton />
355

356
// Custom close button
357
<ToastContainer
358
  closeButton={({ closeToast }) => (
359
    <button onClick={closeToast} className="custom-close">
360
      ✕
361
    </button>
362
  )}
363
/>
364
```
365

366
### Accessibility Features
367

368
Built-in accessibility support with customization options.
369

370
```typescript { .api }
371
// ARIA role for the container
372
role?: string;
373

374
// Right-to-left language support
375
rtl?: boolean;
376

377
// Keyboard shortcut to focus first notification (default: Alt+T)
378
hotKeys?: (e: KeyboardEvent) => boolean;
379
```
380

381
**Usage Examples:**
382

383
```typescript
384
// Custom ARIA role
385
<ToastContainer role="alert" />
386

387
// RTL support
388
<ToastContainer rtl />
389

390
// Custom keyboard shortcut (Cmd+F instead of Alt+T)
391
<ToastContainer
392
  hotKeys={(e) => e.metaKey && e.key === 'f'}
393
/>
394

395
// Disable keyboard shortcuts
396
<ToastContainer
397
  hotKeys={() => false}
398
/>
399
```
400

401
### Event Handlers
402

403
React to container-level events.
404

405
```typescript { .api }
406
// Called when any toast opens
407
onOpen?: (props: ToastContentProps) => void;
408

409
// Called when any toast closes
410
onClose?: (props: ToastContentProps) => void;
411
```
412

413
**Usage Examples:**
414

415
```typescript
416
<ToastContainer
417
  onOpen={(props) => {
418
    console.log('Toast opened:', props.toastProps.toastId);
419
  }}
420
  onClose={(props) => {
421
    console.log('Toast closed:', props.toastProps.toastId);
422
  }}
423
/>
424
```
425

426
## Multiple Containers
427

428
You can use multiple ToastContainer instances for different areas of your app.
429

430
**Usage Example:**
431

432
```typescript
433
import { toast, ToastContainer } from 'react-toastify';
434

435
function App() {
436
  const notifyA = () => toast("Default container");
437
  const notifyB = () => toast("Custom container", { containerId: 'B' });
438

439
  return (
440
    <div>
441
      <button onClick={notifyA}>Notify A</button>
442
      <button onClick={notifyB}>Notify B</button>
443
      
444
      {/* Default container */}
445
      <ToastContainer />
446
      
447
      {/* Custom container */}
448
      <ToastContainer
449
        containerId="B"
450
        position="bottom-left"
451
        enableMultiContainer
452
      />
453
    </div>
454
  );
455
}
456
```