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 |
progressClassName | string | - | Add optional classes 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 |