Lightweight toast notification library for React
- Simple toast API
- Supports multiple toast types and durations
| Type | Preview |
|---|---|
| Success |  |
| Error |  |
| Info |  |
| Warning |  |
npm install mole-toast
# or
yarn add mole-toastImport ToastProvider and ToastManager to root layout
import { ToastProvider, ToastManager } from "mole-toast";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body>
<ToastProvider>
{children}
<ToastManager />
</ToastProvider>
</body>
</html>
);
}Use the toast hook inside of ToastProvider:
import React from "react";
import { useToast, ToastManager } from "mole-toast";
function DemoButton() {
const toast = useToast();
return (
<button onClick={() => toast.shortSuccess("This is a success message!")}>
Show Success Toast
</button>
);
}
export default App;longSuccess(message: string)longError(message: string)longInfo(message: string)longWarning(message: string)shortSuccess(message: string)shortError(message: string)shortInfo(message: string)shortWarning(message: string)clear()- clear all toasts in state
This library requires the following peer dependencies to be installed in your project:
React (>=17)
MIT © Boeun Han