React Toaster Service

A lightweight, developer-friendly React toast notification system with automatic CSS injection — no need to import styles manually.

🚀 Features

• ✅ Simple toast API: toast.success(), toast.error(), toast.info(), toast.warning()
• ✅ Automatic CSS injection — no manual CSS import required
• ✅ Multiple toast stacking
• ✅ Clean, modern UI with animations
• ✅ Zero external dependencies (except React)

📦 Installation

npm install react-toaster-service

⚙️ Usage

1. Wrap your App with ToastProvider

Wrap your root component (App.jsx or main.jsx) with the ToastProvider so that toast context is available globally.

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ToastProvider } from 'react-toaster-service';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ToastProvider>
      <App />
    </ToastProvider>
  </React.StrictMode>
);

2. Use the useToast() hook in any component

import React from 'react';
import { useToast } from 'react-toaster-service';

const MyComponent = () => {
  const toast = useToast();

  return (
    <div>
      <button onClick={() => toast.success("Saved successfully!")}>Success</button>
      <button onClick={() => toast.error("Something went wrong!")}>Error</button>
      <button onClick={() => toast.info("Here’s some info")}>Info</button>
      <button onClick={() => toast.warning("Warning: check input!")}>Warning</button>
    </div>
  );
};

export default MyComponent;

🔧 API Reference

useToast() returns:

| Method | Description | |-----------------------------|----------------------------------| | toast.success(msg, duration?) | Green success toast | | toast.error(msg, duration?) | Red error toast | | toast.info(msg, duration?) | Blue info toast | | toast.warning(msg, duration?) | Yellow warning toast |

• msg: string — Toast message
• duration: (optional) number in milliseconds (default: 3000)

🎨 Toast Styling

You don’t need to import any CSS manually. Styles are automatically injected at runtime.

| Type | Background Color | |---------|------------------| | success | Green | | error | Red | | info | Blue | | warning | Yellow |

✅ Each toast includes:

• Manual ❌ close button so users can dismiss early
• Progress bar indicating time left before auto-dismiss

Made with ❤️ using React, Vite, and coffee.