DEV Community

Cover image for Meet ToastaX — Your New Toast Notification BFF for React 🔔
Mahmud Rahman
Mahmud Rahman

Posted on

Meet ToastaX — Your New Toast Notification BFF for React 🔔

#npm #react #toast #notification

ToastaX v3.0, a sleek, customizable, and accessible toast notification library for React apps, built in TypeScript and ready to roll —
Why you’ll dig it:

  • Looks your way — Themes like light, dark, glass, gradient-blue, neon… size it up from xs to xl, pick shapes like pill or rounded, and tweak opacity anytime.([npm][1])
  • Smooth moves — Enter and exit toasts via animations like fade, slide, bounce, zoom, or flip, with support for reduced-motion modes.([npm][1])
  • Progress your way — Top, bottom, left, right—or go stealth and hide it entirely. Adjust thickness from thin to extra-thick.([npm][1])
  • Promise-based flows — Built for async: loading → success → error—handled neatly with a promise API.([npm][1])
  • Friendly by design — ARIA labels, screen-reader enhancements, high-contrast modes, and motion reduction all included.([npm][1])
  • Interactive magic — Draggable toasts, swipe-to-dismiss with pause-on-hover or focus, and customizable action buttons.([npm][1])
  • Clutter-free zones — Cluster similar toasts when they pile up to keep things tidy.([npm][1])
  • Mobile-first — Dynamic layout and sizing so your toasts look just as good on phones.([npm][1])
  • TypeScript lovers rejoice — Fully typed with detailed definitions baked in.([npm][1])
  • Plugin-ready — Want sound, vibration feedback, or analytics? Plugins support that too.([npm][1])
  • Performance focused — Lazy rendering, virtual scrolling, batch updates—speedy and efficient.([npm][1])

How to Get Started 

npm install toastax
npm install dompurify  # peer dependency for HTML sanitisation
Enter fullscreen mode Exit fullscreen mode

Drop it into your React project and you're off to the races. No fluff, just polished notifications.([npm][1])

TL;DR

Whether you're building a sleek dashboard or a shiny web app, ToastaX packs theme flexibility, async-ready APIs, accessibility, performance, and interactivity—all in one modern package. Please give it a spin and level up your user notifications.

toastax - npm
Docs

Follow for more!

Top comments (0)