README.md

React Toast MSG

Fast, flexible, developer-friendly React toast notifications with a clean black & white design.

✨ Features

• Zero Config: Works out of the box with sensible defaults.
• Tailwind Driven: Styled with Tailwind CSS for modern aesthetics.
• Performance: Built with tsup for high performance and small bundle size.
• Customizable: Easily customize duration, type, and icons.
• Readable by Default: Auto-closing toasts pause while hovered.
• Promise Support: First-class support for toast.promise.

Installation

Before installing, make sure you have Tailwind CSS installed in your project.

npm install react-toast-msg
# or
pnpm add react-toast-msg
# or
yarn add react-toast-msg

Usage

1. Add the ToastContainer to the root of your application:

import { ToastContainer } from 'react-toast-msg';
import 'react-toast-msg/style.css';

function App() {
    return (
        <>
            <YourApp />
            <ToastContainer />
        </>
    );
}

2. Trigger toasts from anywhere:

import { toast } from 'react-toast-msg';

// Basic toast
toast('Hello World!');

// Typed toasts
toast.success('Your changes have been saved.');
toast.error('An error occurred. Please try again.');
toast.warning('Check your internet connection.');
toast.loading('Saving results...');

// Hover pauses auto close by default
toast('Hover me if you need more time to read', { duration: 5000 });

// Promise toast
toast.promise(saveData(), {
    loading: 'Saving...',
    success: 'Saved successfully!',
    error: 'Failed to save.'
});

Documentation

Learn more and explore examples at rtm.sudhucodes.com.

Contributing

We welcome contributions! Please see our Contributing Guide for more details.

License

This project is licensed under the MIT License.