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
1import { ToastContainer } from "react-toast-msg";
2
3function App() {
4    return (
5        <>
6            <ToastContainer />
7            {/* Your application components */}
8        </>
9    );
10}

2. Import styles

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

tsx
1import "react-toast-msg/style.css";

3. Trigger Toasts

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

tsx
1import { toast } from "react-toast-msg";
2
3function MyComponent() {
4    return (
5        <button onClick={() => toast.success("Successfully saved!")}>
6            Show Success Toast
7        </button>
8    );
9}

Available Toast Types

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

tsx
1toast.success("Succes message");
2toast.error("Error message");
3toast.warning("Warning message");
4toast("Default message");

Last updated on February 17, 2026