react-alert-toastify-wrapper/README.md

A replacement for react-alert using react-toastify under the hood.

# React Alert Toastify Wrapper

A React 18+ friendly wrapper that mimics `react-alert` but uses `react-toastify` under the hood.

[![npm version](https://img.shields.io/npm/v/react-alert-toastify-wrapper.svg?style=flat-square)](https://www.npmjs.com/package/react-alert-toastify-wrapper)
[![npm downloads](https://img.shields.io/npm/dm/react-alert-toastify-wrapper.svg?style=flat-square)](https://www.npmjs.com/package/react-alert-toastify-wrapper)
[![MIT License](https://img.shields.io/npm/l/react-alert-toastify-wrapper.svg?style=flat-square)](LICENSE)

---

## Features

-   ✅ Drop-in replacement for `react-alert`
-   🚀 Powered by `react-toastify`
-   ⚛️ Works with React 18+
-   🎨 Auto-themed toasts
-   🧼 No extra setup

---

## Installation

```bash
npm install react-alert-toastify-wrapper
```

---

## Quick Usage

```tsx
import alert from 'react-alert-toastify-wrapper';

function App() {
    return (
        <>
            <alert.container />
            <button onClick={() => alert.success("Saved!")}>Show Toast</button>
        </>
    );
}
```

All methods accept `message: string` and optional `ToastOptions`.

| Method          | Description                   | Example                                     |
| --------------- | ----------------------------- | ------------------------------------------- |
| `alert.success()` | Show a success toast          | `alert.success("Saved!")`                  |
| `alert.error()`   | Show an error toast            | `alert.error("Something went wrong!")`     |
| `alert.info()`    | Show an info toast             | `alert.info("Heads up!")`                   |
| `alert.warning()` | Show a warning toast          | `alert.warning("Check this out!")`         |
| `alert.show()`    | Show a default/plain toast    | `alert.show("Hello there!")`               |
| `alert.removeAll()`| Dismiss all visible toasts    | `alert.removeAll()`                         |
| `<alert.container />` | Toast container (must be rendered once) | `<alert.container />`                    |

---

## Customization

You can customize the appearance and behavior of the toasts by passing options to the `alert.container`.

```tsx
import alert, { AlertProviderProps } from 'react-alert-toastify-wrapper';

const options: AlertProviderProps = {
  position: 'top-right',
  autoClose: 5000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
  theme: 'light',
};

function App() {
  return (
    <>
      <alert.container {...options} />
      <button onClick={() => alert.success("Saved!")}>Show Toast</button>
    </>
  );
}
```

---

## Contributing

Contributions are welcome! Please feel free to open issues and submit pull requests.

---

## License

MIT