Package Exports

toastjs-notifications
toastjs-notifications/toast-notifications.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (toastjs-notifications) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎉 ToastJS Notifications

ToastJS Notifications es la librería de notificaciones toast más elegante y minimalista para tu aplicación web. Con animaciones suaves, diseño moderno y una experiencia de usuario excepcional.

demo

📦 Instalación

📦 npm

npm install toastjs-notifications

📦 CDN

Puedes usar ToastJS Notifications a través de CDN. Aquí tienes dos opciones:

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/toastjs-notifications@1.11.11/toast-notifications.min.js"></script>

unpkg

<script src="https://unpkg.com/toastjs-notifications@1.11.11/toast-notifications.min.js"></script>

🚀 Uso Básico

Puedes usar ToastJS Notifications de la siguiente manera:

// Mostrar diferentes tipos de notificaciones
showToast.info("Mensaje de información"); // Notificación de información
showToast.success("¡Éxito!"); // Notificación de éxito
showToast.warning("Advertencia"); // Notificación de advertencia
showToast.error("Error"); // Notificación de error

🎨 Posicionamiento Dinámico

Ahora puedes definir la posición directamente desde el objeto de opciones en cada llamada:

showToast.error("Error crítico", {
  duration: 2000,
  position: "top-center",
});

showToast.success("Guardado exitoso", {
  position: "bottom-right",
});

Posiciones disponibles:

Estas son las posiciones disponibles para los ToastJS Notifications:

top-left
top-center
top-right (por defecto)
bottom-left
bottom-center
bottom-right

Duración Personalizada por Toast

// Toast con duración de 2 segundos
showToast.warning("Duración personalizada", { duration: 2000 });

// Toast persistente (requiere cierre manual)
showToast.info("Este mensaje no se cierra solo", { duration: 0 });

📱 Características

🎯 Diseño moderno y responsive
🌈 Tipos: info, success, warning, error
📍 Posicionamiento dinámico por toast o instancia
⚡ Animaciones suaves
🎨 Personalizable
🚀 Sin dependencias externas
💪 Soporte para múltiples instancias

📝 Ejemplo Completo

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToastJS Notifications - Demo</title>
  </head>
  <body>
    <!-- Botón de demostración que muestra un toast de éxito -->
    <button id="show-toast">Mostrar Toast</button>

    <!-- Incluimos la librería ToastJS desde el CDN -->
    <script src="https://cdn.jsdelivr.net/npm/toastjs-notifications@1.11.11/toast-notifications.min.js"></script>

    <!-- Código de inicialización -->
    <script>
      document.getElementById("show-toast").addEventListener("click", () => {
        // Mostramos un mensaje de bienvenida 8 segundos después de que la página cargue
        showToast.success("¡Bienvenido a ToastJS Notifications! 🎉", {
          duration: 8000, // Duración en milisegundos
          position: "top-center", // Posición del toast
        });
      });
    </script>
  </body>
</html>

🤝 Únete y Contribuye

¿Tienes una idea o encontraste un bug? ¡Contribuye!

🔗 GitHub: github.com/urian121/toastjs-notifications

👨‍💻 Desarrollador

Urian Viera
🌐 urianviera.com
📺 YouTube
💌 urian1213viera@gmail.com
☕ Apóyame en PayPal

🪪 Licencia

🙌 Agradecimientos

Gracias a todos los Devs 👨‍💻 que han usado y apoyado ToastJS Notifications. Tu feedback es clave para mejorar la librería.