Customizable toast notifications for React
npm install d9-toastbash
npm install d9-toast
`
or
`bash
yarn add d9-toast
`
---
🚀 Quick Start
$3
`jsx
import { ToastProvider } from "d9-toast";
import "d9-toast/toast.css";
export default function Root() {
return (
);
}
`
> ⚠️ Required once at app root
---
$3
`jsx
import { toast } from "d9-toast";
// You can call it directly!
const notify = () => toast("Simple notification");
// Or use specific types
const success = () => toast.success("Saved!");
`
✅ Works inside
* components
* utils
* services
* async functions
---
📖 Toast API
`ts
import { toast } from "d9-toast";
`
$3
| Method | Description |
| ------------------------------------------- | ------------------- |
| toast(msg, options) | Show default toast |
| toast.success(msg, options) | Show success toast |
| toast.error(msg, options) | Show error toast |
| toast.info(msg, options) | Show info toast |
| toast.warning(msg, options) | Show warning toast |
| toast.promise(promise, messages, options) | Promise-based toast |
| toast.dismiss(id) | Remove toast |
| toast.dismissAll() | Clear all toasts |
---
🔧 Toast Options
$3
| Option | Type | Description |
| ------------------ | -------------------------------------------------------------------------------------------------- | --------------------------- |
| message | string \| ReactNode | Toast content |
| type | "success" \| "error" \| "info" \| "warning" \| "loading" \| "submit" | Visual type |
| theme | "light" \| "dark" \| "colored" | Theme |
| position | "top-right" \| top-left \| bottom-right \| bottom-left \| center \| center-top \| center-bottom" | Placement |
| duration | number | Auto close (0 = persistent) |
| autoClose | boolean | Enable auto close |
| closable | boolean | Show close button |
| progress | boolean | Progress bar |
| title | boolean | Header/title |
| pauseOnHover | boolean | Pause on hover |
| pauseOnFocusLoss | boolean | Pause on tab switch |
| rtl | boolean | RTL text support |
| expand | boolean \| "hover" | Expand stacked toasts |
| className | string | Custom styles |
---
🔘 Action Buttons
`ts
actions?: {
text: string;
className?: string;
callback?: (toast: { id: string }) => void;
}[];
`
$3
`jsx
toast.success("File uploaded", {
actions: [
{
text: "Undo",
callback: ({ id }) => toast.dismiss(id),
},
],
});
`
---
🔄 Promise Toasts (NEW)
`jsx
toast.promise(
fetch("/api/save"),
{
loading: "Saving...",
success: "Saved successfully!",
error: "Failed to save",
}
);
`
✔ Auto loading
✔ Auto update
✔ Returns original promise
---
🔊 Audio Support
$3
`ts
audio?: {
enabled?: boolean;
volume?: number; // 0–1
audioFile?: string;
cooldown?: number; // ms
};
`
$3
`jsx
toast.success("Message sent", {
audio: {
enabled: true,
volume: 0.8,
audioFile: toast.sounds.success,
},
});
`
✔ Per-toast control
✔ Cooldown prevents spam
✔ Custom sound support
---
🎨 Styling
$3
`js
import "d9-toast/toast.css";
`
$3
`jsx
toast.success("Styled Toast", {
className:
"!bg-gradient-to-r from-indigo-600 to-purple-600 !text-white !rounded-xl",
});
`
> ⚠️ Use !important for Tailwind overrides
---
🧠 Advanced
$3
`jsx
const id = toast.info("Processing...", { duration: 0 });
// later
toast.dismiss(id);
`
---
$3
`jsx
toast.info(
Custom JSX
Supports React nodes
);
`
---
🧾 TypeScript Support
`ts
import type { ToastOptions, ToastType } from "d9-toast";
`
✔ Full IntelliSense
✔ Strict typing
✔ Zero any`