ToastContainer

Props

PropsTypeDefaultDescription
positionstringtop-rightOne of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClosebool | number5000Delay in ms to close the toast. If set to false, the notification needs to be closed manually
closeButtonReactNode | bool-A React Component to replace the default close button or false to hide the button
transitionReactNodeBounceA reference to a valid react-transition-group/Transition component
hideProgressBarboolfalseDisplay or not the progress bar below the toast(remaining time)
pauseOnHoverbooltrueKeep the timer running or not on hover
pauseOnFocusLossbooltruePause the timer when the window loses focus
rtlboolfalseSupport right to left content
closeOnClickbooltrueDismiss toast on click
newestOnTopboolfalseDisplay newest toast on top
classNamestring-Add optional classes to the container
styleobject-Add optional inline style to the container
toastClassNamestring-Add optional classes to the toast
bodyClassNamestring-Add optional classes to the toast body
progressClassNamestring-Add optional classes to the progress bar
progressStyleobject-Add optional inline style to the progress bar
draggablebooltrueAllow toast to be draggable
draggablePercentnumber80The percentage of the toast's width it takes for a drag to dismiss a toast(value between 0 and 100)
draggableDirection"x" | "y"xSpecify the drag direction.
enableMultiContainerbool-Enable multi toast container support
containerIdstring | number-Used to identify the ToastContainer when working with multiple container. Also used to set the id attribute
limitnumber-Used to limit the number of toast displayed on screen at the same time
rolestringalertDefine the ARIA role for the toasts

Usage

import { ToastContainer } from 'react-toastify';
<ToastContainer
containerId="an id"
draggable={false}
{/* etc... */}
/>