ToastContainer

Props

Props	Type	Default	Description
position	string	top-right	One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClose	bool | number	5000	Delay in ms to close the toast. If set to false, the notification needs to be closed manually
closeButton	ReactNode | bool	-	A React Component to replace the default close button or false to hide the button
transition	ReactNode	Bounce	A reference to a valid react-transition-group/Transition component
hideProgressBar	bool	false	Display or not the progress bar below the toast(remaining time)
pauseOnHover	bool	true	Keep the timer running or not on hover
pauseOnFocusLoss	bool	true	Pause the timer when the window loses focus
rtl	bool	false	Support right to left content
stacked	bool	false	Stack notifications
closeOnClick	bool	false	Dismiss toast on click
newestOnTop	bool	false	Display newest toast on top
className	string	-	Add optional classes to the container
style	object	-	Add optional inline style to the container
toastClassName	string	-	Add optional classes to the toast
bodyClassName	string	-	Add optional classes to the toast body
progressClassName	string	-	Add optional classes to the progress bar
progressStyle	object	-	Add optional inline style to the progress bar
draggable	bool	"touch"	Allow toast to be draggable
draggablePercent	number	80	The percentage of the toast's width it takes for a drag to dismiss a toast(value between 0 and 100)
draggableDirection	"x" | "y"	x	Specify the drag direction.
containerId	string | number	-	Used to identify the ToastContainer when working with multiple container. Also used to set the id attribute
limit	number	-	Used to limit the number of toast displayed on screen at the same time
role	string	alert	Define the ARIA role for the toasts
theme	string	light	One of light, dark, colored

Usage

import { ToastContainer } from 'react-toastify';

<ToastContainer
  containerId="an id"
  draggable={false}
  {/* etc... */}
/>