react ~11 KB 0 deps v0.4.2 ↗ GitHub ↗

@mshafiqyajid/react-toast

Toast notification system for React. Singleton store — no context wrapping needed. Six positions, five types plus loading + Sonner-style toast.promise, 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-toast

Quick 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.");
toast.loading("Saving…");

Promise lifecycle (toast.promise) #

Cycle a single toast through loading → success or error states.

toast.promise(saveProfile(), {
  loading: "Saving profile…",
  success: (user) => `Saved ${user.name}`,
  error:   (err)  => `Failed: ${(err as Error).message}`,
});

Standalone toast import #

The toast binding is also exported directly for non-React contexts (e.g. service helpers).

import { toast } from "@mshafiqyajid/react-toast";

toast.error("Caught outside React");
toast.dismiss(); // dismiss all

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();

Headless #

Skip ToastProvider and render toasts however you like — useToasts() subscribes to the live queue.

import { useToasts, toast } from "@mshafiqyajid/react-toast";

function CustomToaster() {
  const toasts = useToasts();
  return (
    <div className="my-toaster">
      {toasts.map((t) => (
        <div key={t.id} data-type={t.type}>
          {t.title && <strong>{t.title}</strong>}
          <p>{t.message}</p>
        </div>
      ))}
    </div>
  );
}

// Fire from anywhere — works outside React, too
toast.success("Saved!");

API — ToastProvider #

PropTypeDefaultDescription
position"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right""bottom-right"Where toasts appear
maxToastsnumber5Max toasts shown at once
durationnumber4000Default auto-dismiss duration in ms

API — toast() options #

OptionTypeDefaultDescription
type"neutral" | "success" | "error" | "warning" | "info" | "loading""neutral"Toast type (sets colour and icon). "loading" defaults to Infinity duration and shows a spinner.
titlestring—Bold title shown above the message
durationnumber4000Auto-dismiss delay in ms. Use Infinity to persist
action{ label: string; onClick: () => void }—Inline action button inside the toast
Edit this page on GitHub