🚀 Nextjs Toast Notify: La Librería Definitiva para Notificaciones en Apps Web Modernas

#nestjs #alertasparanextjs #toastnextjs #notifynextjs

¡Bienvenidos a Nextjs Toast Notify, el paquete NPM moderno, ligero y altamente personalizable que transforma la manera en que gestionas notificaciones en tus aplicaciones web! Ya sea que estés desarrollando con Next.js, React, Vue, Svelte o JavaScript puro, esta librería te permite agregar notificaciones emergentes (toasts) elegantes y responsivas con solo una línea de código. ¡Di adiós a las alertas pesadas y hola a una experiencia de usuario impecable! 🎉

✨ ¿Por Qué Elegir Nextjs Toast Notify?

Ultra Ligero: Sin dependencias, minificado para máximo rendimiento y sin inflar tu proyecto.
Increíblemente Simple: Intégralo en minutos con una API clara e intuitiva.
Totalmente Personalizable: Controla posiciones, animaciones, duraciones, íconos (SVGs, emojis), barras de progreso y sonidos para adaptarlo al estilo de tu app.
Moderno y Responsivo: Diseños atractivos listos para usar, perfectos para cualquier tema (incluido modo oscuro).
Versátil: Soporta toasts de éxito, error, advertencia e información para todas tus necesidades de notificación.
Compatible con Frameworks: Funciona perfectamente con Next.js, React, Vue, Svelte o JavaScript puro.

Comparado con alternativas más pesadas como react-toastify o sonner, Nextjs Toast Notify es ligero, rápido y amigable para desarrolladores. Está licenciado bajo MIT y se mantiene activamente para garantizar fiabilidad.

📦 Instalación

¡Empieza en segundos!

Vía NPM (Recomendado para Next.js/React)

npm install nextjs-toast-notify --save

yarn add nextjs-toast-notify

Vía CDN (Para JavaScript Puro)

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

🚀 Inicio Rápido

Ejemplo en React/Next.js

Añade un toast de éxito con barra de progreso e ícono personalizado:

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

function MiComponente() {
  const handleClick = () => {
    showToast.success("¡Operación completada! 🎉", {
      duration: 4000, // 4 segundos
      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}>Mostrar Toast</button>;
}

export default MiComponente;

Ejemplo en JavaScript Puro (CDN)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo de Toast Notify</title>
</head>
<body>
  <button id="btn-toast">Mostrar 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("¡Hola, Devs de JavaScript! 🚀", {
        duration: 5000,
        position: "top-right",
        transition: "topBounce",
        icon: "🚀",
        sound: true
      });
    });
  </script>
</body>
</html>

🎨 Opciones de Personalización

Adapta los toasts a tus necesidades:

Tipos: success, error, warning, info
Posiciones: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
Animaciones: bounceIn, slideIn, fadeIn, topBounce, y más
Características: Íconos personalizados (SVG, emojis), barras de progreso, efectos de sonido, cierre manual, duración ajustable
Estilos: Sobrescribe CSS con .nextjs-toast-notify__container o estilos por toast

DEV Community