Posiciones Toast
Tipos de Toast
Tipos de Transición Toast
Sonido Toast
Progress Toast
jsx
1showToast.success("¡La operación se realizó con éxito!", {
2 duration: 4000,
3 progress: true,
4 position: "top-right",
5 transition: "bounceIn",
6 icon: '',
7 sound: true,
8 });Instalación rápida y sencilla
Nextjs Toast Notify es tan versátil que no solo funciona con frameworks como React y Next.js, sino que también puedes usarlo en proyectos con HTML, CSS y JavaScript vanilla mediante CDN.
npm install nextjs-toast-notifyEjemplo con HTML + CDN
1<!DOCTYPE html>
2<html lang="es">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Nextjs Toast Notify con CDN</title>
7 </head>
8 <body>
9 <button id="show-toast">Mostrar Toast</button>
10
11 <script src="https://unpkg.com/nextjs-toast-notify@1.47.0/dist/nextjs-toast-notify.js"></script>
12 <script>
13 document.getElementById("show-toast").addEventListener("click", () => {
14 showToast.success("Hola a todos los Devs de JavaScript!", {
15 duration: 5000,
16 position: "top-right",
17 transition: "topBounce",
18 icon: "",
19 sound: true,
20 });
21 });
22 </script>
23 </body>
24</html>Por qué es tan fácil
- Cero configuración — Solo incluye el script CDN
- Sin dependencias — Funciona en cualquier proyecto web
- API simple — Una línea de código para mostrar toasts
- Altamente personalizable — Posiciones, animaciones, sonidos y más
¿Listo para llevar tus notificaciones al siguiente nivel?
Súmate a la comunidad de desarrolladores que ya están elevando la experiencia de usuario con Nextjs Toast Notify.