@mshafiqyajid/react-toast
Toast notification system for React. Singleton store — no context wrapping needed. Six positions, five types, progress bar, animated entry/exit, auto-dismiss, max queue cap.
Playground #
Props
TSX
import { ToastProvider } from "@mshafiqyajid/react-toast/styled";
import { useToast } from "@mshafiqyajid/react-toast";
import "@mshafiqyajid/react-toast/styles.css";
<ToastProvider />Install #
npm install @mshafiqyajid/react-toastQuick start #
// 1. Add ToastProvider once in your app root
import { ToastProvider } from "@mshafiqyajid/react-toast/styled";
import "@mshafiqyajid/react-toast/styles.css";
export default function App() {
return (
<>
<ToastProvider position="bottom-right" />
{/* rest of your app */}
</>
);
}
// 2. Call toast() anywhere in your app
import { useToast } from "@mshafiqyajid/react-toast";
function SaveButton() {
const { toast } = useToast();
return (
<button onClick={() => toast.success("Saved!")}>Save</button>
);
}Toast types #
const { toast } = useToast();
toast("Neutral message");
toast.success("Saved successfully!");
toast.error("Something went wrong.");
toast.warning("Check your input.");
toast.info("New update available.");Title #
Add a bold title above the message with the title option.
toast.success("Your file has been uploaded.", { title: "Upload complete" });
toast.error("Please check your connection.", { title: "Request failed" });Action button #
Add an inline action button with the action option. Clicking it dismisses the toast automatically.
toast("File moved to trash.", {
action: {
label: "Undo",
onClick: () => restoreFile(),
},
});Custom duration #
toast.success("Quick!", { duration: 2000 });
toast.error("Persistent error", { duration: Infinity });Dismiss #
const { toast, dismiss, dismissAll } = useToast();
const id = toast.info("Loading…");
// later:
dismiss(id);
dismissAll();API — ToastProvider #
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Where toasts appear |
| maxToasts | number | 5 | Max toasts shown at once |
| duration | number | 4000 | Default auto-dismiss duration in ms |
API — toast() options #
| Option | Type | Default | Description |
|---|---|---|---|
| type | "neutral" | "success" | "error" | "warning" | "info" | "neutral" | Toast type (sets colour and icon) |
| title | string | — | Bold title shown above the message |
| duration | number | 4000 | Auto-dismiss delay in ms. Use Infinity to persist |
| action | { label: string; onClick: () => void } | — | Inline action button inside the toast |