Sonner
Anadir notificaciones toast elegantes a una aplicacion React sin construir el componente desde cero.
Libreria de notificaciones toast para React con una API simple y buen diseno por defecto.
Notas y contexto
Qué es
Sonner es una libreria de notificaciones toast para React. Proporciona un componente Toaster y una API sencilla para mostrar mensajes temporales al usuario con buen diseno por defecto.
Para qué sirve
- Mostrar confirmaciones despues de guardar, borrar o enviar datos.
- Avisar de errores sin bloquear la pantalla.
- Informar del estado de acciones asincronas.
- Anadir notificaciones pulidas sin construir un sistema propio.
Cuándo usarlo
Usalo en aplicaciones React donde necesitas feedback inmediato para acciones del usuario. Encaja especialmente bien en dashboards, formularios, paneles de administracion y productos SaaS.
Puntos clave
- API pequena y facil de recordar.
- Buen aspecto visual sin mucho trabajo.
- Soporta distintos tipos de mensajes y estados.
- Documentacion clara y ejemplos directos.
Ejemplo basico
import { Toaster, toast } from 'sonner';
function App() {
return (
<>
<Toaster />
<button onClick={() => toast('Guardado correctamente')}>Guardar</button>
</>
);
}Ten en cuenta
Es una solucion especifica para notificaciones. Si necesitas un sistema completo de feedback, modales, banners persistentes y centro de notificaciones, tendras que combinarla con otros componentes.