A replacement for react-alert using react-toastify under the hood.
npm install react-alert-toastify-wrapperA React 18+ friendly wrapper that mimics react-alert but uses react-toastify under the hood.
---
- ✅ Drop-in replacement for react-alert
- 🚀 Powered by react-toastify
- ⚛️ Works with React 18+
- 🎨 Auto-themed toasts
- 🧼 No extra setup
---
``bash`
npm install react-alert-toastify-wrapper
---
`tsx
import alert from 'react-alert-toastify-wrapper';
function App() {
return (
<>
);
}
`
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() |
| | Toast container (must be rendered once) | |
---
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 (
<>
);
}
``
---
Contributions are welcome! Please feel free to open issues and submit pull requests.
---
MIT