react-toaster-service/README.md

A simple React toast notification service with auto CSS injection

# 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

```bash
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.

```jsx
// 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

```jsx
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.