Quick Start

Get up and running with react-toast-msg in seconds.

Follow these steps to add toast notifications to your React app.

1. Add the ToastContainer

Place the ToastContainer at the root of your application (usually in your main layout or app component). This component will render all active toasts.

tsx
import { ToastContainer } from 'react-toast-msg';
 
function App() {
    return (
        <>
            <ToastContainer />
            {/* Your application components */}
        </>
    );
}

2. Import styles

Import the CSS file in your main css file (e.g., app/globals.css or src/index.css):

tsx
import 'react-toast-msg/style.css';

3. Trigger Toasts

Use the toast function to trigger notifications from anywhere in your application.

tsx
import { toast } from 'react-toast-msg';
 
function MyComponent() {
    return (
        <button onClick={() => toast.success('Successfully saved!')}>
            Show Success Toast
        </button>
    );
}

Available Toast Types

You can use the following shorthand methods for different notification types:

tsx
toast.success('Succes message');
toast.error('Error message');
toast.warning('Warning message');
toast('Default message');

How is this guide?

Last updated on April 21, 2026

Installation

Examples