React Toast MSG - (SudhuCodes)

A lightweight and customizable React toast notification library.

!Version
!License
!Downloads

!React Toast MSG

---

Features

- Lightweight & fast
- Tailwind CSS based styling
- Global & per-toast configuration
- Multiple toast variants
- Auto close with animation
- Manual close button support

Installation

``bash
npm i react-toast-msg
`

Install Tailwind CSS

Make sure you have Tailwind CSS installed in your project.

$3

In your global CSS file (e.g., index.css or App.css), import the library's CSS:

`css
@import 'react-toast-msg/style.css';
`

---

Usage

$3

`jsx
import { toast, ToastContainer } from 'react-toast-msg';

export default function Example() {
return (
<>

toast('Default toast')}>Default
toast.success('Success toast')}>Success
{/ rest /}
toast.success('Success toast', { duration: 5000, closeButton: false })}>
Success with duration


);
}
`

---

Custom Auto-Close Duration

You can now define a custom timeout per toast.

| Usage Example | Description |
| ----------------------------------------------- | ------------------------------------ |
| toast('Message') | Default timeout |
| toast('Message', { duration: 1000 }) | Closes after 1000ms (1 second) |
| toast.success('Saved') | Success toast |
| toast.success('Saved', { duration: 5000 }) | Success toast closes after 5 seconds |
| toast.error('Error', { closeButton: true }) | Error toast with close button |
| toast.warning('Warn', { closeButton: false }) | Warning without close button |

> Per-toast options always override ToastContainer defaults.

$3

`jsx
toast('This will close in 1 second', { duration: 1000 })}>
Show 1s Toast


toast.success('Success - 5s', { duration: 5000 })}>
Show 5s Success Toast

`

---

ToastContainer Props

| Prop | Type | Default | Description |
| ----------- | ------- | ------- | ------------------------------------------------- |
| autoClose | number | 3000 | Default close time in milliseconds for all toasts |
| closeButton | boolean | false | Close button visibility for all toasts |

Usage:

`jsx
// Default
`

---

Available Toast Variants

`js
toast('Default message');
toast.success('Success message');
toast.error('Error occurred');
toast.warning('Warning message');
``

---

Contributing

Contributions are welcome. You can:

- Report issues
- Suggest features
- Submit pull requests
- Improve documentation or code quality

Repository: https://github.com/sudhucodes/react-toast-msg

---

License

react-toast-msg is MIT licensed.

---

_{© 2025 SudhuCodes — All rights reserved.}