A lightweight, customizable React toast notification library with zero-config and fast setup.
npm install react-toast-msgbash
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 (
<>
{/ rest /}
>
);
}
`
---
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
`
---
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');
``
© 2025 SudhuCodes — All rights reserved.