Advanced Usage

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
import { toast } from 'react-toast-msg';
 
// This toast will stay for 10 seconds
toast.success('Long message', { duration: 10000 });

Disable Auto Close

If you have an important message that requires the user's explicit attention, you can prevent the toast from closing automatically by passing autoClose: false. This will automatically force the close button to show, ensuring the user can still dismiss it.

tsx
// This toast requires the user to click the close button
toast.error('Critical server error!', { autoClose: false });

Pause On Hover

Auto-closing toasts pause their timer while hovered by default, which gives users time to read longer messages without changing your API calls.

tsx
toast.success('Hover this toast to pause the countdown', {
    duration: 5000
});

If you want a toast to keep closing on schedule even while hovered, disable it per toast or on the container.

tsx
toast('This toast will keep counting down', {
    duration: 5000,
    pauseOnHover: false
});

Manual Close Button

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

tsx
// Enabling close button per toast
toast.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
<ToastContainer autoClose={5000} closeButton={true} pauseOnHover={true} />

• autoClose: Default duration for all toasts in milliseconds. Pass false to disable auto-closing globally.
• closeButton: Whether to show a close button by default.
• pauseOnHover: Pauses the auto-close timer while a user hovers a toast. Defaults to true.

Promises

Handle asynchronous operations seamlessly with toast.promise. It manages loading, success, and error states for you.

tsx
import { toast } from 'react-toast-msg';
 
const fetchData = async () => {
    const promise = new Promise(resolve =>
        setTimeout(() => resolve({ name: 'User' }), 2000)
    );
 
    toast.promise(promise, {
        loading: 'Fetching data...',
        success: data => `Hello, ${data.name}!`,
        error: err => `Error: ${err.message}`
    });
};

Last updated on April 22, 2026