@toster/react-toast

Production-ready React toast/notification library with global APIs, queue support, headless control, and deep customization.

Primary trigger API is ping(...) (legacy notify(...) is still supported as an alias).

Install

npm i ping-toasts

Basic usage

import { ToastProvider, ping } from "ping-toasts";
import "ping-toasts/style.css";

export function App() {
  return (
    <ToastProvider>
      <button onClick={() => ping("Saved successfully", { type: "success" })}>Ping</button>
    </ToastProvider>
  );
}

Provider config

<ToastProvider
  position="top-right"
  duration={3000}
  theme="system"
  spacing={10}
  maxToasts={5}
  animation="slide"
  pauseOnHover
/>

Animation options

slide, fade, zoom, bounce, flip, swing, pop, drop, blur, rotate, skew, slide-left, slide-right, slide-up, slide-down

Per-toast options

ping("Upload complete", {
  type: "success",
  duration: 4000,
  position: "bottom-right",
  showIcon: true,
  closable: true,
  progressBar: true,
  action: {
    label: "View",
    onClick: () => console.log("view")
  },
  className: "my-toast",
  style: { borderRadius: 20 },
  render: (toast) => <div>Custom UI: {toast.message}</div>
});

Promise toasts

await ping.promise(apiCall(), {
  loading: "Loading...",
  success: "Done",
  error: "Failed"
});

Update/dismiss

const id = ping("Working...", { type: "loading", duration: 0 });
updateToast(id, { message: "Done", type: "success", duration: 2000 });
dismiss(id);
dismissAll();

Headless mode

Use useToast() to build your own UI and behavior.

const { activeToasts, queuedToasts, ping, dismiss } = useToast();

Accessibility

• role="status" / role="alert" per toast
• aria-live support
• Escape dismisses the latest visible toast

Dev

npm run typecheck
npm run build