Creación de notificaciones atractivas con Toastr en React

Las notificaciones son esenciales para cualquier aplicación web, ya que brindan a los usuarios información importante. En lugar de crear el sistema de notificación desde cero, puede utilizar bibliotecas externas. Toastr es una de las bibliotecas populares para crear notificaciones en aplicaciones de JavaScript.

Instalación de la biblioteca Toastr

Primero, comience creando una aplicación React con la que trabajará. Puede crear una aplicación React usando Vite.

Después de crear la aplicación, instale el tostadora paquete en su proyecto ejecutando el siguiente comando en su terminal:

npm install --save toastr

Ahora que ha instalado el tostadora paquete y puede usarlo para mostrar notificaciones.

Crear notificaciones usando Toastr

Para crear las notificaciones, utilizará el tostadora función. El tostadora La función se utiliza para crear y mostrar mensajes de brindis. Antes de crear sus notificaciones, asegúrese de importar su

tostadora estilos de notificaciones en su archivo CSS.

@import'toastr';

Este es un ejemplo de cómo se crea una notificación usando el tostadora función:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

En este ejemplo, usted define un notificar función. El Haz click en mi el botón llama al notificar función al hacer clic en él. El notificar función utiliza el tostadas.éxito función para mostrar una notificación de éxito.

El tostadas.éxito La función toma dos argumentos. El primer argumento es el mensaje de notificación que, en este caso, es la cadena "Es bueno tenerte aquí". El segundo argumento es el título de la notificación, "Bienvenido".

Aparecerá una notificación similar a la siguiente imagen cuando haga clic en el Haz click en mi botón.

Además de tostadas.éxito función, la tostadora El objeto proporciona otras funciones para crear notificaciones. Las otras funciones son las tostador.error, tostadas.advertencia, y tostadas.info. Cada función crea una notificación con un color de fondo e ícono diferente, para que pueda distinguir fácilmente entre diferentes tipos de notificaciones.

Por ejemplo, cuando utiliza el tostador.error función, su notificación se verá así:

Personalización de sus notificaciones

Con la biblioteca Toastr, no puede personalizar sus notificaciones usando CSS tradicional, a diferencia de cuando se trabaja con React-Toastify. Sin embargo, Toastr todavía ofrece otras opciones para personalizar las notificaciones. Puede usar estas opciones para personalizar la posición, el aspecto y la funcionalidad de sus notificaciones. Necesitas pasar las opciones al tercer argumento del tostadora método.

Aquí hay un ejemplo:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Para personalizar la notificación, este código utiliza el boton cerrar, barra de progreso, se acabó el tiempo, positionClass, Mostrar método, y hideMethod propiedades del objeto de opciones. El boton cerrar La propiedad determina si su notificación se mostrará con un botón de cierre. Acepta un valor booleano.

Utilizando el barra de progreso propiedad, puede agregar una barra de progreso a la notificación. Configuración de la se acabó el tiempo La propiedad le permite controlar cuánto tiempo se mostrará una notificación. Esta propiedad especifica el número de milisegundos antes de que la notificación desaparezca automáticamente.

El positionClass La propiedad define la posición de la notificación en su pantalla. Acepta ocho valores predefinidos. Los valores incluyen:

• tostadas arriba a la derecha: Muestra la notificación en la esquina superior derecha de su pantalla.
• tostadas arriba a la izquierda: La notificación se mostrará en la esquina superior izquierda de su pantalla.
• centro de tostadas: La notificación aparecerá en la parte superior central de su pantalla.
• tostadas-abajo-derecha: Verá la notificación en la esquina inferior derecha de su pantalla.
• tostada-abajo-izquierda: La notificación se coloca en la esquina inferior izquierda de su pantalla.
• tostadas-fondo-centro: Encontrará la notificación en la parte inferior central de la pantalla.
• tostada-superior-de ancho completo: la notificación aparece en la parte superior de la pantalla y ocupa todo el ancho de la pantalla.
• parte inferior tostada-ancho-completo: La notificación ocupa todo el ancho de la pantalla y se muestra en la parte inferior.

Por último, el Mostrar método y hideMethod Las propiedades controlan las animaciones para mostrar y ocultar la notificación. El Mostrar método propiedad especifica la animación utilizada para mostrar una notificación, mientras que la hideMethod La propiedad especifica la animación utilizada para ocultar una notificación.

La notificación definida en el bloque de código anterior aparecerá en la parte superior central de su pantalla, con una barra de progreso y un botón de cierre. Desaparecerá después de tres segundos y usará transiciones de aparición y desaparición gradual para aparecer y desaparecer.

Se verá algo como esto.

Tenga en cuenta que puede personalizar cada notificación de Toastr con un solo objeto de opciones en lugar de personalizarlas una por una. Para ello, utilizará el tostador.opciones propiedad. Este objeto de propiedad contiene las propiedades de personalización de todas sus notificaciones Toastr.

Por ejemplo:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Este ejemplo muestra cómo configurar todas las notificaciones para tener una barra de progreso, un botón de cierre, una pantalla en la parte superior derecha esquina de la pantalla, cerrar automáticamente después de 5 segundos y usar transiciones de aparición y desaparición gradual para aparecer y desaparecer.

Ejecutar la aplicación y hacer clic en los botones generará una interfaz que se vería como la imagen a continuación.

Haz que tus notificaciones sean interactivas

Puede hacer que sus notificaciones sean más atractivas agregando interactividad, como la posibilidad de hacer clic en ellas. Para hacer esto, utiliza el al hacer clic propiedad. El al hacer clic La propiedad es una de las opciones de personalización que proporciona la biblioteca Toastr. Especifica una función que se ejecuta cuando hace clic en la notificación, similar a la haga clic en evento (uno de los detectores de eventos de JavaScript).

Aquí hay un ejemplo de cómo usar el al hacer clic propiedad:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

En el bloque de código anterior, el objeto de opciones del tostadas.éxito La función contiene un al hacer clic propiedad. El al hacer clic propiedad llama a la tostador.claro función, que borra la notificación de la pantalla.

Cree notificaciones atractivas usando Toastr

Aquí, aprendió a usar la biblioteca Toastr para crear notificaciones atractivas para su aplicación React. Instalaste Toastr, lo configuraste en tu aplicación y creaste y personalizaste tus notificaciones. Toastr es una biblioteca poderosa que puede ayudarlo a crear notificaciones informativas y visualmente atractivas. Además de Toastr, también puede probar otras bibliotecas como SweetAlert, React-Toastify o Chakra UI.