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

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, works in light & dark
• Accessible — ARIA live regions, prefers-reduced-motion support
• Zero deps, ~6kb gzipped, fully typed

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, custom 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