React Alert Toastify Wrapper

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

Features

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

Installation

npm install react-alert-toastify-wrapper

Quick Usage

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.

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