Cómo crear alertas personalizadas en React usando React-Toastify

Los mensajes de alerta a menudo se usan en aplicaciones web para mostrar advertencias, errores, mensajes de éxito y otra información valiosa.

Hay algunos paquetes y marcos populares para crear mensajes de alerta en React. React-Toastify es una biblioteca React que le permite agregar notificaciones y mensajes de alerta a sus aplicaciones.

Instalación de React Toastify

Para instalar Toastify en su proyecto React, ejecute este comando en el directorio de su proyecto:

npm install --save reaccionar-tostar

Configuración de Toastify

Para utilizar el paquete Toastify, deberá importar el BrindisContenedor, tostada y el archivo CSS adjunto proporcionado por el paquete.

El BrindisContenedor dentro del componente de la aplicación se almacenan todas las notificaciones de brindis creadas.

importar { ToastContainer, tostadas } de"reaccionar-tostar";
importar'reaccionar-toastify/dist/ReactToastify.css';
funciónaplicación() {
devolver(



 </div>
 );
}

Puedes usar el tostada métodos para crear notificaciones de brindis para su proyecto React:

funciónaplicación() {
constante notificar = () => brindis.éxito("¡Hola!");
devolver(


Notificar</button>

 </div>
 );
}

Al hacer clic en el botón que genera este código, se llamará al brindis.exito método, pasándole el "¡Hola!" cadena. Esto creará una notificación de brindis que muestra el mensaje en la pantalla, así:

Tenga en cuenta que hay diferentes tipos de métodos de brindis a los que puede llamar, como tostadas.info(), brindis.error(), brindis.éxito(), tostadas.advertencia(). Cada uno de estos métodos tiene un estilo de color sutil para reflejar el tipo de mensaje.

Posicionamiento de sus notificaciones de tostadas

De forma predeterminada, las notificaciones de brindis aparecen en la parte superior derecha de la pantalla de la aplicación web. Puede cambiar esto configurando la propiedad de posición en el BrindisContenedor. Hay seis valores de posición disponibles: arriba a la derecha, arriba al centro, arriba a la izquierda, abajo a la derecha, abajo al centro y abajo a la izquierda.

Por ejemplo:

funciónaplicación() {
constante notificar = () => brindis.éxito("¡Hola!");
devolver(


Notificar</button>
"arriba a la izquierda"/>
 </div>
 );
}

Ajuste de la posición prop en el BrindisContenedor en la parte superior izquierda garantiza que todas las notificaciones de brindis aparezcan en la parte superior izquierda de la pantalla.

Puede cambiar la posición predeterminada para las notificaciones de brindis individuales utilizando el apoyo de posición de la tostada métodos:

funciónaplicación() {
constante notificar = () => brindis.éxito("¡Hola!", {posición: tostada. POSICIÓN.TOP_CENTER});
devolver(


Notificar</button>
"arriba a la izquierda"/>
 </div>
 );
}

También puedes posicionar las notificaciones de Toast usando la propiedad de posición CSS, pero el accesorio de posición de Toastify es la forma estándar de hacer esto.

Manejo de autoClose Prop de Toast Method y ToastContainer

Puede modificar el tiempo de visualización de las notificaciones de brindis. Puede controlar cuánto tiempo permanece abierta una notificación de brindis usando el auto cerrado apuntalar. Puede modificar el tiempo de demora para todas las notificaciones de brindis y las notificaciones de brindis específicas de cada individuo. El auto cerrado prop solo acepta el valor booleano falso o una duración en milisegundos.

Para modificar el tiempo de retraso para todas las notificaciones de brindis, utilice el auto cerrado apoyo dentro de la BrindisContenedor elemento.

Por ejemplo:

funciónaplicación() {
constante notificar = () => brindis.éxito("¡Hola!");
devolver(


Notificar</button>
5000}/>
 </div>
 );
}

Con la configuración anterior, todas las notificaciones de brindis se mostrarán durante exactamente cinco segundos (5000 milisegundos).

Utilizando el auto cerrado propiedad de cada uno tostada método, puede personalizar el tiempo de retraso para las notificaciones de brindis individuales.

Por ejemplo:

funciónaplicación() {
constante notificar a uno = () => tostadas.info("Se cerrará en 10 segundos", {auto cerrado: 10000});
constante notificarDos = () => tostadas.info("Se cerrará en 15 segundos", {auto cerrado: 15000});
devolver (


Notificar a uno</button>
Notificar a dos</button>

 </div>
 );
}

Para evitar que la notificación del brindis se cierre de forma predeterminada, puede configurar el auto cerrado apoyar a FALSO. Puede asegurarse de que el usuario debe cerrar manualmente cada notificación del brindis configurando el auto cerrado apoyo de la BrindisContenedor a falso

Por ejemplo:

funciónaplicación() {
constante notificar = () => tostadas.info("¡Hola!");
devolver (


Notificar</button>
FALSO} />
 </div>
 );
}

Configuración de la auto cerrado apoyo de individuo tostada métodos para FALSO también se asegurará de que esas notificaciones de brindis específicas no se cierren de forma predeterminada.

Representación de notificaciones sin cadena con Toastify

Puede representar cadenas, componentes de reacción y números como mensajes de notificación cuando trabaja con notificaciones del sistema. Para renderizar un componente de React como una notificación de brindis, crea el componente y renderízalo usando un tostada método.

Por ejemplo:

funciónMensaje({toastProps, closeToast}) {
devolver (


Bienvenido {toastProps.position}</p>
</button>
 </div>
 )
}
exportarpor defecto Mensaje;

Este bloque de código crea un componente, Mensaje. Al representar un componente como una notificación, el brindis agrega brindisAccesorios y cerrarbrindis apoyos a su componente. El cerrarbrindis prop es una función que puede usar para cerrar la notificación. El brindisAccesorios prop es un objeto con propiedades que almacenan detalles sobre la notificación del brindis, incluida su posición, tipo y otras características.

Importe el componente Message, luego páselo a la función toast(), presentándolo como una notificación de brindis:

importar { ToastContainer, tostadas } de"reaccionar-tostar";
importar'reaccionar-toastify/dist/ReactToastify.css';
importar Mensaje de"./componentes/Mensaje";
funciónaplicación() {
constante mensaje = () => tostada(<Mensaje />);
devolver (


Bienvenido</button>

 </div>
 );
}

Al hacer clic en el botón, aparecerá una notificación que contiene una pregunta y dos botones en su pantalla.

Dar estilo a las notificaciones de brindis

No tiene que usar el estilo predeterminado para sus notificaciones de brindis. Puede personalizarlos para que se ajusten a un tema o patrón de diseño deseado que se adapte a su aplicación web.

Para darle estilo a tu notificación de brindis, dale un nombre de la clase y aplicar las personalizaciones dentro de un archivo CSS.

Por ejemplo:

funciónaplicación() {
constante notificar = () => brindis.éxito("¡Hola!", {nombre de la clase: "mensaje de brindis"});
devolver (


Notificar</button>
"centro Superior" />
 </div>
 );
}

Con el nombre de la clase adjunto a su notificación, puede diseñar la notificación de brindis según sus preferencias dentro del archivo CSS:

.toast-mensaje {
color de fondo: #000000;
color: #FFFFFF;
tamaño de fuente: 20píxeles;
relleno: 1movimiento rápido del ojo 0.5rem;
}

Como resultado del estilo personalizado anterior, la notificación se verá así:

Notificaciones tostadas para su aplicación web

Ahora puede crear alertas personalizadas en React utilizando el paquete React-Toastify y sus métodos disponibles. Al diseñar estas alertas/notificaciones personalizadas según sus preferencias, puede mejorar la experiencia del usuario de su aplicación web.

React-Toastify ofrece un método rápido y eficaz para incluir alertas personalizadas en su proyecto React sin complicaciones.