mole-toast
v1.1.0
Published
Lightweight toast notification library for React
Downloads
11
Maintainers
boeunhanReadme
mole-toast
Lightweight toast notification library for React
Features
- Simple toast API
- Supports multiple toast types and durations
Demo
Live Preview
Toast Types
| Type | Preview |
| ------- | ------------------------------------------------------------------------------------------- |
| Success | |
| Error |
|
| Info |
|
| Warning |
|
Installation
npm install mole-toast
# or
yarn add mole-toastUsage
Import 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;Toast API
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
Peer Dependencies
This library requires the following peer dependencies to be installed in your project:
React (>=17)
License
MIT © Boeun Han