Las notificaciones toast son mensajes emergentes que se agregan para mostrar un mensaje a un usuario. Puede ser un mensaje de éxito, un mensaje de advertencia o un mensaje personalizado. Toast Notification también se llama Toastify Notifications . Esta notificación de todas las tostadas viene debajo del módulo reaccionar-tostar, por lo que para usarlas necesitamos importar este módulo.
requisitos previos:
A continuación, se describen todos los pasos ordenados para agregar una notificación de brindis y su configuración.
- Paso 1: antes de continuar, primero debemos instalar el módulo react-toastify, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta src o también puede ejecutar este comando en la terminal de Visual Studio Code en la carpeta de tu proyecto.
npm add react-toastify
- Paso 2: después de instalar el módulo react-toastify, ahora abra su archivo app.js que está presente dentro del directorio de su proyecto, en la carpeta src, y elimine el código preestablecido dentro de él.
- Paso 3: ahora importe el módulo de reacción, el archivo CSS de tostado y un método de notificación de brindis para la persona que llama.
- Paso 4: en su archivo app.js , agregue este código para importar los módulos de tostado agregando el siguiente código en su app.js
import {toast} from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; toast.configure()
Ejemplo 1: Por defecto, la posición de notificación es arriba a la derecha.
- aplicación.js:
javascript
import React from 'react'; // Importing toastify module import {toast} from 'react-toastify'; // Import toastify css file import 'react-toastify/dist/ReactToastify.css'; // toast-configuration method, // it is compulsory method. toast.configure() // This is main function function GeeksforGeeks(){ // function which is called when // button is clicked const notify = ()=>{ // Calling toast method by passing string toast('Hello Geeks') } return ( <div className="GeeksforGeeks"> <button onClick={notify}>Click Me!</button> </div> ); } export default GeeksforGeeks;
- Producción:
Ejemplo 2: Hay un total de seis posiciones donde podemos mostrar nuestra notificación. Estos son abajo a la izquierda, abajo al centro, abajo a la derecha, arriba a la izquierda, arriba a la derecha y arriba al centro . Para cambiar la posición necesitamos pasar un argumento más en el método de tostado junto con la string. Vea a continuación cómo configurar la posición de las notificaciones.
- aplicación.js:
javascript
import React from 'react'; import {toast} from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; toast.configure() function GeeksforGeeks(){ const notify = ()=>{ toast('Hello Geeks 4', {position: toast.POSITION.BOTTOM_LEFT}) toast('Hello Geeks 6', {position: toast.POSITION.BOTTOM_RIGHT}) toast('Hello Geeks 5', {position: toast.POSITION.BOTTOM_CENTER}) toast('Hello Geeks 1', {position: toast.POSITION.TOP_LEFT}) toast('Hello Geeks 3', {position: toast.POSITION.TOP_RIGHT}) toast('Hello Geeks 2', {position: toast.POSITION.TOP_CENTER}) } return ( <div className="GeeksforGeeks"> <button onClick={notify}>Click Me!</button> </div> ); } export default GeeksforGeeks;
- Producción:
Ejemplo 3: Hasta ahora hemos utilizado la notificación predeterminada, pero hay cuatro notificaciones de tipo integradas más . Estos son un éxito, advertencia, información y error . Vea a continuación cómo usarlos.
- aplicación.js:
javascript
import React from 'react'; import {toast} from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; toast.configure() function GeeksforGeeks(){ const notify = ()=>{ // inbuilt-notification toast.warning('Danger') // inbuilt-notification toast.success('successful') // inbuilt-notification toast.info('GeeksForGeeks') // inbuilt-notification toast.error('Runtime error') // default notification toast('Hello Geeks') } return ( <div className="GeeksforGeeks"> <button onClick={notify}>Click Me!</button> </div> ); } export default GeeksforGeeks;
- Producción:
Ejemplo 4: De forma predeterminada, las notificaciones se muestran solo durante 5 segundos. Para configurar el tiempo, usamos el método de cierre automático, y si configuramos el método de cierre automático en falso, entonces el usuario debe cerrar esa notificación; de lo contrario, permanecerá allí solo. Vea a continuación cómo usarlo.
- aplicación.js:
javascript
import React from 'react'; import {toast} from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; toast.configure() function GeeksforGeeks(){ const notify = ()=>{ // Set to 10sec toast.warning('Danger', {autoClose:10000}) // Set to 3sec toast.success('successful', {autoClose:3000}) // User have to close it toast.info('GeeksForGeeks', {autoClose:false}) toast.error('Runtime error', { // Set to 15sec position: toast.POSITION.BOTTOM_LEFT, autoClose:15000}) toast('Hello Geeks')// Default } return ( <div className="GeeksforGeeks"> <button onClick={notify}>Click Me!</button> </div> ); } export default GeeksforGeeks;
- Producción:
Publicación traducida automáticamente
Artículo escrito por prathvirsingh18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA