PingToast

Ultra-lightweight toast notifications for React & vanilla JS.

Zero deps · ~6kb gzipped · Animated · Fully typed

Docs · Playground · Changelog

---

Install

npm install ping-toast

Quick Start — React

import { PingToaster, toast } from 'ping-toast/react'

export default function App() {
  return (
    <>
      <PingToaster position="top-right" theme="auto" />
      <YourApp />
    </>
  )
}

// then anywhere
toast.success('Saved!')

Quick Start — Vanilla / Vue / Svelte / Angular

import { toast, configure } from 'ping-toast'

configure({ position: 'top-right', theme: 'auto' })

toast.success('Works everywhere!')

Core API

toast('Hello')
toast.success('Saved!')
toast.error('Failed')
toast.warning('Careful')
toast.info('Update available')
toast.loading('Processing...')

toast.promise(fetchData(), {
  loading: 'Loading...',
  success: (d) => `Got ${d.count} items`,
  error:   (e) => e.message,
})

await toast.confirm('Delete?', { confirm: 'Delete', cancel: 'Keep' })
await toast.alert('Session expired')

toast.update(id, { type: 'success', message: 'Done' })
toast.dismiss(id)
toast.dismissAll()

Theming

Flat props cover the basics; colors lets you override per-type background, text, and icon accent. Omitted types keep the built-in palette, and icons follow the accent color automatically. Theme and color props are fully prop-controlled — set them on <PingToaster> (or configure()) and they apply reliably.

<PingToaster
  theme="dark"
  background="#18181b"
  foreground="#fafafa"
  radius="12px"
  colors={{
    success: { accent: '#4ade80' },
    error:   { bg: '#450a0a', fg: '#fecaca' },
  }}
/>

// vanilla — same shape via configure()
configure({
  theme: 'dark',
  colors: { success: { accent: '#4ade80' }, error: { bg: '#450a0a', fg: '#fecaca' } },
})

Custom toasts

In React, toast.custom accepts a real ReactNode (JSX) — render your own component and wire up dismissal:

const id = toast.custom(
  <MyToast onClose={() => toast.dismiss(id)} />,
  { duration: 5000 },
)

JSX rendering uses react-dom, which is an optional peer dependency (pulled in only by the React entry). In vanilla ping-toast, toast.custom still takes a string | (toast) => string.

Features

• 6 toast types — default, success, error, warning, info, loading
• 5 animations — slide, fade, scale, bounce, flip
• Promise API — auto loading → success/error
• Action buttons — undo, retry, anything
• Confirm / Alert dialogs — drop-in replacements for window.confirm / window.alert
• Full theming — flat props plus per-type colors (bg / fg / accent), works in light & dark
• JSX custom toasts — render a real React component, not just an HTML string
• Accessible — ARIA live regions, prefers-reduced-motion support
• Stable useToast() — memoized once, safe in dependency arrays
• Zero deps, ~6kb gzipped, fully typed

Tests

Covered by a full vitest + jsdom suite:

npm test

Full documentation

Everything — every prop, every option, every pattern — is at pingtoast.1619.in.

Section	What it covers
Quick Start	Two-step setup for React and vanilla
Usage Patterns	Declarative vs imperative vs zero-config + debug checklist
Live Demo	Click every toast type, see the snippet
Positions	All 6 positions with live preview
Promise API	Loading → success/error in one call
Action Buttons	Undo, retry, any inline action
Theming	Light, dark, auto, flat props + per-type colors
API Reference	Every method, prop, and option
Playground	Try every config live
Changelog	All releases, dated and categorized
AI Agent Skill	Ready-to-paste context for Claude / Cursor / Copilot

Links

• npm — npmjs.com/package/ping-toast
• GitHub — github.com/KumarDeepak16/ping-toast
• Issues — github.com/KumarDeepak16/ping-toast/issues

License

MIT © Deepak Kumar