🚀 Nextjs Toast Notify es la librería definitiva para notificaciones web modernas. Transforma tus alertas aburridas en toasts elegantes y personalizables con una sola línea de código.
¿Qué lo hace especial?
✨ Rápido, elegante y sin complicaciones - Desde instalación hasta implementación en menos de 1 minutos
🎨 Totalmente personalizable - Controla cada aspecto: posición, animación, duración, iconos y sonidos
⚡ Ultra liviano - Sin dependencias pesadas, máximo rendimiento
🔧 Plug & Play - Compatible con React, Next.js, Vanilla JS y cualquier framework moderno
Instala Nextjs Toast Notify fácilmente con tu gestor de paquetes favorito:
# Usando npm
npm install nextjs-toast-notify --save
# O con yarn
yarn add nextjs-toast-notify
import { showToast } from "nextjs-toast-notify";
function App() {
const handleShowToast = () => {
showToast.success("¡La operación se realizó con éxito!", {
duration: 5000,
progress: true,
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" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>',
sound: true,
});
};
return <button onClick={handleShowToast}>Mostrar Toast</button>;
}
export default App;Para Next.js 13+ (App Router): Simplemente agrega "use client" al inicio de tu componente - ¡y listo! El toast funcionará perfectamente en el cliente.
"use client"; // Esto indica que el componente se renderizará en el cliente
import { showToast } from "nextjs-toast-notify";
// Componente principal de Next.js
export default function App() {
// Manejador de evento para mostrar el toast
const handleShowToast = () => {
showToast.success("¡La operación se realizó con éxito!");
};
return (
<button onClick={handleShowToast}>Mostrar Toast</button>
);
}
También puedes incluir Nextjs Toast Notify directamente en tu proyecto utilizando un enlace CDN. Sigue estos pasos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nextjs Toast Notify con CDN</title>
</head>
<body>
<button id="show-toast">Mostrar Toast</button>
<script src="https://unpkg.com/nextjs-toast-notify@latest/dist/nextjs-toast-notify.min.js"></script>
<script>
document.getElementById("show-toast").addEventListener("click", () => {
showToast.success("Hola a todos los Devs de JavaScript!", {
duration: 5000,
position: "top-right",
transition: "swingInverted",
icon: "",
sound: true,
});
});
</script>
</body>
</html>La API de Nextjs Toast Notify te permite mostrar notificaciones emergentes con una amplia gama de configuraciones. A continuación, se detalla cómo utilizar los métodos disponibles y qué opciones puedes configurar.
Nextjs Toast Notify permite mostrar distintos tipos de notificaciones según el contexto de tu aplicación.
Para definir el tipo, simplemente especifícalo al invocar showToast:
- ✅
showToast.success→ Muestra un toast de éxito. - ❌
showToast.error→ Muestra un toast de error. ⚠️ showToast.warning→ Muestra un toast de advertencia.- ⬆️
showToast.info→ Muestra un toast de información.
import { showToast } from "nextjs-toast-notify";
function App() {
const handleShowSuccessToast = () => {
showToast.success("¡Operación exitosa!"); // 'showToast.success' | 'showToast.error' | 'showToast.info' | 'showToast.warning'
};
return <button onClick={handleShowSuccessToast}>Toast Success</button>;
}
export default App;Para mostrar notificaciones en distintas posiciones de la pantalla, especifica la opción position con alguno de los siguientes valores:
top-left→ Esquina superior izquierdatop-center→ Centro superiortop-right→ Esquina superior derechabottom-left→ Esquina inferior izquierdabottom-center→ Centro inferiorbottom-right→ Esquina inferior derecha
Aquí tienes un ejemplo de cómo configurarlo:
import { showToast } from "nextjs-toast-notify";
function App() {
const handleToastPosition = () => {
showToast.success("¡Operación exitosa!", {
position: "top-right", // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
});
};
return <button onClick={handleToastPosition}>Toast arriba derecha</button>;
}
export default App;La duración por defecto de las notificaciones es de 8 segundos, pero puedes personalizarla con la opción duration.
- Propiedad:
duration - Tipo:
number | null - Por defecto:
8000
Comportamiento de duration:
number: El toast se cierra automáticamente después del tiempo especificado (en milisegundos)null: El toast usa la duración por defecto (8000ms) para la barra de progreso, pero NO se cierra automáticamente. Requiere cierre manual del usuario
Ejemplo con duración personalizada:
import { showToast } from "nextjs-toast-notify";
function App() {
const handleShowToast = () => {
showToast.success("¡Toast que se cierra en 5 segundos!", {
duration: 5000, // Se cierra automáticamente en 5 segundos
});
};
return <button onClick={handleShowToast}>Toast con auto-cierre</button>;
}
export default App;Ejemplo con cierre manual:
import { showToast } from "nextjs-toast-notify";
function App() {
const handleShowPersistentToast = () => {
showToast.warning("¡Este toast requiere cierre manual!", {
duration: null, // NO se cierra automáticamente
});
};
return <button onClick={handleShowPersistentToast}>Toast persistente</button>;
}
export default App;La barra de progreso se muestra por defecto en las notificaciones, pero puedes desactivarla si lo prefieres.
- Propiedad:
progress - Tipo:
boolean - Por defecto:
true
Ejemplo:
import { showToast } from "nextjs-toast-notify";
function App() {
const handleShowToast = () => {
showToast.info("¡Toast de información!", {
progress: false, // Desactiva la barra de progreso
});
};
return <button onClick={handleShowToast}>Mostrar Toast</button>;
}
export default App;La posición por defecto es la esquina superior derecha, pero puedes cambiarla con la opción position.
- Propiedad:
position - Tipo:
'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' - Por defecto:
'top-right'
Ejemplo:
import { showToast } from "nextjs-toast-notify";
function App() {
const handleToastPosition = () => {
showToast.success("¡Toast centrada correctamente!", {
position: "top-center", // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
});
};
return <button onClick={handleToastPosition}>Toast centrada</button>;
}
export default App;Personaliza la animación de entrada y salida de las notificaciones mediante la opción transition.
- Propiedad:
transition - Tipo:
'fadeIn' | 'bounceIn' | 'swingInverted' | 'popUp' | 'topBounce' | 'bounceInDown' | 'slideInUp' - Por defecto:
'fadeIn'
Ejemplo:
import { showToast } from "nextjs-toast-notify";
function App() {
const handleToastAnimationPopUp = () => {
showToast.error("!Toast con animación popUp!", {
transition: "popUp",
}); // Animación tipo popUp
};
return <button onClick={handleToastAnimationPopUp}>Toast Rebote</button>;
}
export default App;Agrega un ícono personalizado a las notificaciones para mejorar la identidad visual.
Si no se proporciona, se usa uno predeterminado según el tipo de notificación.
- Propiedad:
icon - Tipo:
string
Ejemplo:
function App() {
const handleToastIcon = () => {
showToast.success("¡Toast con ícono!", {
icon: "🎉", // Opcional: puede ser un ícono, emoji o SVG personalizado
});
};
return <button onClick={handleToastIcon}>Toast con ícono</button>;
}Activa un sonido al mostrar la notificación para captar mejor la atención del usuario.
- Propiedad:
sound - Tipo:
boolean - Por defecto:
false
Ejemplo:
import { showToast } from "nextjs-toast-notify";
function App() {
const handleToastSound = () => {
showToast.info("¡Toast con sonido activo!", {
sound: true, // Opcional: habilita el sonido (true o false)
});
};
return <button onClick={handleToastSound}>Toast con sonido</button>;
}
export default App;import { showToast } from "nextjs-toast-notify";
function App() {
const mostrarNotificacion = () => {
showToast.success("¡Operación exitosa!", {
duration: 4000, // Duración del toast en milisegundos (4 segundos)
position: "top-center", // Posición en pantalla del toast
transition: "bounceIn", // Animación de entrada
icon: "🚀", // Ícono personalizado (puede ser emoji, svg o HTML)
progress: false, // Mostrar o no la barra de progreso
sound: true, // Reproducir sonido al mostrar el toast
});
};
return <button onClick={mostrarNotificacion}>Mostrar Notificación</button>;
}
export default App;La notificación tiene una duración de 4 segundos, está centrada en la parte superior, con un efecto de animación de rebote, un ícono personalizado, sin barra de progreso y con sonido activado.
Si encuentras algún problema o tienes una idea para mejorar el paquete, por favor abre un issue o envía un pull request en GitHub: https://github.com/urian121/nextjs-toast-notify
Urian Viera
🌐 urianviera.com
📺 YouTube
💌 urian1213viera@gmail.com
☕ ¡Apóyame en PayPal!
© 2024 Urian Viera. Todos los derechos reservados.
Licensed under MIT
¡Gracias a todos los Devs 👨💻 que han utilizado y contribuido al desarrollo de Nextjs Toast Notify! Su apoyo y retroalimentación son fundamentales para mejorar continuamente este paquete.