toastjs-notifications
Advanced tools
Una librería moderna, ligera y elegante para notificaciones toast en aplicaciones web. Incluye animaciones suaves, múltiples posiciones y diseño responsive.
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.
npm install toastjs-notifications
Puedes usar ToastJS Notifications a través de CDN. Aquí tienes dos opciones:
<script src="https://cdn.jsdelivr.net/npm/toastjs-notifications@1.11.14/toast-notifications.min.js"></script>
<script src="https://unpkg.com/toastjs-notifications@1.11.14/toast-notifications.min.js"></script>
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
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",
});
Estas son las posiciones disponibles para los ToastJS Notifications:
top-lefttop-centertop-right (por defecto)bottom-leftbottom-centerbottom-right// 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 });
info, success, warning, error<!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.14/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>
¿Tienes una idea o encontraste un bug? ¡Contribuye!
🔗 GitHub: github.com/urian121/toastjs-notifications
Urian Viera
🌐 urianviera.com
📺 YouTube
💌 urian1213viera@gmail.com
☕ Apóyame en PayPal
MIT © 2025 Urian Viera
Gracias a todos los Devs 👨💻 que han usado y apoyado ToastJS Notifications. Tu feedback es clave para mejorar la librería.
FAQs
Una librería moderna, ligera y elegante para notificaciones toast en aplicaciones web. Incluye animaciones suaves, múltiples posiciones y diseño responsive.
The npm package toastjs-notifications receives a total of 1 weekly downloads. As such, toastjs-notifications popularity was classified as not popular.
We found that toastjs-notifications demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.
