boom-toaster
v1.0.6
Published
A lightweight, beautiful toast notification library for React
Maintainers
saidul-basarReadme
💥 BoomToaster
A lightweight, beautiful toast notification library for React. Zero dependencies (beyond React itself).
Installation
npm install boom-toaster
# or
yarn add boom-toaster
# or
pnpm add boom-toasterQuick Start
1. Add <BoomToaster /> once at your app root:
// components/toaster-provider.tsx
"use client";
import { BoomToaster } from "boom-toaster";
export default function ToasterProvider() {
return <BoomToaster position="top-right" />;
}// app.tsx / layout.tsx
import ToasterProvider from "@/components/toaster-provider";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ToasterProvider />
{children}
</body>
</html>
);
}2. Call boom anywhere:
import { boom } from "boom-toaster";
boom.success("Saved successfully!");
boom.error("Something went wrong.");
boom.warning("Low disk space.");
boom.info("New update available.");
boom.loading("Uploading file...");API
<BoomToaster />
| Prop | Type | Default | Description |
| ----------------- | --------------- | ------------- | ----------------------------- |
| position | ToastPosition | "top-right" | Where toasts appear on screen |
| maxToasts | number | 5 | Max visible toasts at once |
| defaultDuration | number | 4000 | Auto-dismiss delay in ms |
boom methods
| Method | Description |
| --------------------------------- | ---------------------------------------- |
| boom.success(message, options?) | Green success toast |
| boom.error(message, options?) | Red error toast |
| boom.warning(message, options?) | Yellow warning toast |
| boom.info(message, options?) | Blue info toast |
| boom.loading(message, options?) | Spinner toast (persists until dismissed) |
| boom.dismiss(id) | Manually dismiss a toast by id |
| boom.promise(promise, messages) | Auto success/error from a Promise |
ToastOptions
{
id?: string; // custom id (useful for promise / loading)
duration?: number; // ms before auto-dismiss. 0 = persist
position?: ToastPosition; // override global position per toast
description?: string; // secondary text below the title
dismissible?: boolean; // show ✕ button (default: true)
onDismiss?: (id) => void; // callback when dismissed
}ToastPosition
"top-left" |
"top-center" |
"top-right" |
"bottom-left" |
"bottom-center" |
"bottom-right";Examples
With description
boom.success("Order placed!", {
description: "Your order #1234 is confirmed.",
});Persist until manually dismissed
const id = boom.loading("Uploading...", { duration: 0 });
// later:
boom.dismiss(id);Promise toast
boom.promise(
fetch("/api/save").then((r) => r.json()),
{
loading: "Saving...",
success: "Saved!",
error: "Failed to save.",
},
);Per-toast position
boom.error("Critical error!", { position: "top-center", duration: 0 });React hook
import { useBoom } from "boom-toaster";
function MyComponent() {
const boom = useBoom();
return <button onClick={() => boom.success("Hello!")}>Click</button>;
}Multiple positions
You can render multiple <BoomToaster /> for different positions:
<BoomToaster position="top-right" />
<BoomToaster position="bottom-center" />Each one only renders toasts that were sent to its position.
License
MIT