DEV Community

URIAN VIERA
URIAN VIERA

Posted on

🚀 Nextjs Toast Notify: The Ultimate Notification Library for Modern Web Apps

#ui #react #nextjs #javascript

Nextjs Toast Notify in Action

Welcome to Nextjs Toast Notify, the modern, lightweight, and highly customizable NPM package that revolutionizes how you handle notifications in your web applications! Whether you're building with Next.js, React, Vue, Svelte, or plain JavaScript, this library makes it effortless to add sleek, responsive toast notifications with just one line of code. Say goodbye to clunky alerts and hello to a polished user experience! 🎉

✨ Why Choose Nextjs Toast Notify?

  • Ultra-Lightweight: Zero dependencies, minified for performance, and no bundle bloat.
  • Incredibly Simple: Integrate in minutes with a clean, intuitive API.
  • Fully Customizable: Control positions, animations, durations, icons (SVGs, emojis), progress bars, and sounds to match your app's style.
  • Modern & Responsive: Out-of-the-box gorgeous designs, perfect for any theme (including dark mode).
  • Versatile: Supports success, error, warning, and info toasts for all your notification needs.
  • Framework-Friendly: Works seamlessly with Next.js, React, Vue, Svelte, or vanilla JS.

Compared to heavier alternatives like react-toastify or sonner, Nextjs Toast Notify is lean, fast, and developer-friendly. It's MIT-licensed and actively maintained for reliability.

📦 Installation

Get started in seconds:

Via NPM (Recommended for Next.js/React) 

npm install nextjs-toast-notify --save
Enter fullscreen mode Exit fullscreen mode

or

yarn add nextjs-toast-notify
Enter fullscreen mode Exit fullscreen mode

Via CDN (For Vanilla JS) 

<script src="https://unpkg.com/nextjs-toast-notify@1.54.0/dist/nextjs-toast-notify.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

🚀 Quick Start

React/Next.js Example

Add a success toast with a progress bar and custom icon:

import { showToast } from "nextjs-toast-notify";

function MyComponent() {
  const handleClick = () => {
    showToast.success("Operation complete! 🎉", {
      duration: 4000, // 4 seconds
      position: "top-right",
      transition: "bounceIn",
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
      sound: true,
      progress: true
    });
  };

  return <button onClick={handleClick}>Show Toast</button>;
}

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

Vanilla JS Example (CDN) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Notify Demo</title>
</head>
<body>
  <button id="btn-toast">Show Toast</button>
  <script src="https://unpkg.com/nextjs-toast-notify@1.54.0/dist/nextjs-toast-notify.min.js"></script>
  <script>
    document.getElementById("btn-toast").addEventListener("click", () => {
      showToast.success("Hello JavaScript Devs! 🚀", {
        duration: 5000,
        position: "top-right",
        transition: "topBounce",
        icon: "🚀",
        sound: true
      });
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🎨 Customization Options

Tailor toasts to your needs:

  • Types: success, error, warning, info
  • Positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
  • Animations: bounceIn, slideIn, fadeIn, topBounce, and more
  • Features: Custom icons (SVG, emojis), progress bars, sound effects, manual close, adjustable duration
  • Styling: Override CSS with .nextjs-toast-notify__container or per-toast styles

🌐 Resources

Top comments (0)