Toastr para mensajes de error o éxito

Cuando estamos creando una página web o aplicación que requiera interacción del usuario principalmente en el uso de formularios que permiten obtener información es común o importante tener un control de los posibles errores y notificaciones que la aplicación pueda mostrar al usuario.

Toastr es una librería JavaScript para mostrar notificaciones emergentes no bloqueantes (tipo «toast») en una página web. Es ligera, fácil de usar y ampliamente utilizada en aplicaciones web para mostrar mensajes como:

Éxito (Success)
Error (Error)
Información (Info)
Advertencia (Warning)

¿Cómo puedes incluir Toastr en tu página Web?

Necesitas incluir en tu HTML el fichero .css y el código JavaScript. También debes incluir la librería jQuery ya que Toastr no puede funcionar sin ella.

En la cabecera de la página puedes incluir la hoja de estilos que puedes obtener fácilmente a través de un CDN:

Source code

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>

Y antes de la etiqueta de cierre </body> puedes incluir la librería jQuery y el código JavaScript del plugin:

Source code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

Ahora en tu archivo JavaScript puedes llamar a la función toastr de la siguiente manera:

Source code

toastr.success('Operación completada con éxito');
toastr.error('Ocurrió un error');
toastr.warning('Cuidado con esto');
toastr.info('Este es un mensaje informativo');

Para ver algo así en la parte superior derecha de la página:

Se trata de un plugin simple pero tiene algunas opciones que pueden ser interesantes como por ejemplo:

Source code

toastr.options.closeButton = true; //Añadir el botón de cerrar
toastr.options.progressBar = true; //Añadir una barra de progreso
toastr.options.showMethod = 'slideDown'; //Método de apertura del mensaje

Conclusiones

Este plugin lo veo una buena opción para mostrar notificaciones emergentes a modo mensajes informativos, de alerta, de error o de éxito a los usuarios de tus aplicaciones.

A pesar de ser un plugin muy ligero, tengo una pega a día de hoy y es que requiere de la librearía jQuery para funcionar.

Se que en años anteriores siempre he sido fiel a jQuery pero en los últimos años estoy más centrado en JavaScript puro y, por ese motivo, en una próxima publicación crearemos algo parecido a esto pero usando solo JavaScript para que el código no dependa de jQuery y dejemos de cargar una gran librería para una simple función.

Ver demo Descargar