https://github.com/sudhucodes/react-toast-msg
Fast, flexible, developer-friendly React toast notifications with a clean black & white design.
https://github.com/sudhucodes/react-toast-msg
contribute notification open-source react react-toast toast toast-notifications
Last synced: 3 months ago
JSON representation
Fast, flexible, developer-friendly React toast notifications with a clean black & white design.
- Host: GitHub
- URL: https://github.com/sudhucodes/react-toast-msg
- Owner: sudhucodes
- License: mit
- Created: 2025-05-29T02:55:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-28T06:52:31.000Z (3 months ago)
- Last Synced: 2026-03-28T11:45:37.151Z (3 months ago)
- Topics: contribute, notification, open-source, react, react-toast, toast, toast-notifications
- Language: TypeScript
- Homepage: https://rtm.sudhucodes.com
- Size: 1.35 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 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.
- **Promise Support**: First-class support for `toast.promise`.
## Installation
> Before installing, make sure you have Tailwind CSS installed in your project.
```bash
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:
```tsx
import { ToastContainer } from 'react-toast-msg';
import 'react-toast-msg/style.css';
function App() {
return (
<>
>
);
}
```
2. **Trigger toasts** from anywhere:
```tsx
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...');
// Promise toast
toast.promise(saveData(), {
loading: 'Saving...',
success: 'Saved successfully!',
error: 'Failed to save.'
});
```
## Documentation
Learn more and explore examples at [rtm.sudhucodes.com](https://rtm.sudhucodes.com/docs?ref=github).
## Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
## License
This project is licensed under the [MIT License](LICENSE.md).