Advanced Usage

Customize your toasts with durations, close buttons, and more.

Beyond simple messages, you can customize how your toasts behave and look.

Custom Duration

You can override the default auto-close duration by passing a third argument to the toast function (in milliseconds).

tsx
1import { toast } from "react-toast-msg";
2
3// This toast will stay for 10 seconds
4toast.success("Long message", { duration: 10000 });

Manual Close Button

You can enable or disable the close button globally in ToastContainer or per-toast via the toast methods.

tsx
1// Enabling close button per toast
2toast.error("Critical error!", { duration: 5000, closeButton: true });

TIP: Use shorter durations for simple notifications and longer durations for critical errors that require user attention.

Global Configuration

The ToastContainer accepts props that apply to all toasts.

tsx
1<ToastContainer autoClose={5000} closeButton={true} />

• autoClose: Default duration for all toasts in milliseconds.
• closeButton: Whether to show a close button by default.

Last updated on February 17, 2026