Skip to main content

toast

Props​

Info

When displaying a toast, the options are inherited from the container. Toast options supersede ToastContainer props

OptionsTypeDescription
toastIdstring | numberProvide a custom id
typestringOne of info, success, warning, error
positionstringOne of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
onOpenfunctionCalled when the notification appear
onClosefunctionCalled when the notification disappear
autoClosebool | numberDelay in ms to close the toast. If set to false, the notification needs to be closed manually
closeButtonReactNode | boolA React Component to replace the default close button or false to hide the button
transitionReactNodeA reference to a valid react-transition-group/Transition component
hideProgressBarboolDisplay or not the progress bar below the toast(remaining time)
pauseOnHoverboolKeep the timer running or not on hover
pauseOnFocusLossboolPause the timer when the window loses focus
closeOnClickboolDismiss toast on click
classNamestringAdd optional classes to the container
bodyClassNamestringAdd optional classes to the TransitionGroup container
styleobjectAdd optional inline style to the container
progressClassNamestringAdd optional classes to the progress bar
progressStyleobjectAdd optional inline style to the progress bar
draggableboolAllow toast to be draggable
draggablePercentnumberThe percentage of the toast's width it takes for a drag to dismiss a toast(value between 0 and 100)
draggableDirection"x" | "y"Specify the drag direction. Default is x
containerIdstring | numberUsed to match a specific Toast container
rolestringDefine the ARIA role for the toasts
delaynumberLet you delay the toast appearance. Pass a value in ms
onClickfunctionCalled when click inside Toast notification
renderReactNodeOnly available when using toast.update
isLoadingboolOnly available when using `toast.loading'
dataanyany additional data you want to pass toast("hello", { data: {key: value} })

Usages​

All the toast methods return a toastId except dismiss and isActive. The toastId can be used to remove a toast programmatically or to check if the toast is displayed.

const options = {
onOpen: props => console.log(props.foo),
onClose: props => console.log(props.foo),
autoClose: 6000,
closeButton: FontAwesomeCloseButton,
type: toast.TYPE.INFO,
hideProgressBar: false,
position: "top-left",
pauseOnHover: true,
transition: MyCustomTransition,
progress: 0.2
// and so on ...
};

// display toasts
const toastId = toast("Hello", options);
toast(MyComponent, options);
toast(<MyComponent foo={bar}/>, options);
toast(({ closeToast }) => <div>Render props like</div>, options);

//shortcut to different types
toast.success("Hello", options);
toast.info("World", options);
toast.warn(MyComponent, options);
toast.error("Error", options);

// Remove all toasts !
toast.dismiss();

// Remove given toast
toast.dismiss(toastId);

// Remove toast that has a given id for a specific container
toast.dismiss({ id: "123", containerId: "12" })

//Check if a toast is displayed or not
toast.isActive(toastId);

// update a toast
toast.update(toastId, {
type: toast.TYPE.INFO,
render: <Img foo={bar}/>
});

// Clear waiting queue when working with limit
toast.clearWaitingQueue();

// Clear waiting queue for a specific container when working with multiple container
toast.clearWaitingQueue({ containerId: "anId" });


// completes the controlled progress bar
toast.done(toastId);

// play/pause the timer programmatically
toast.play({ id: "123" });
toast.pause({ id: "123" });