Notificación de brindis de ReactJS

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:
 

• Fundamentos de ReactJS
• NodeJS: 
  • Instalación de Node.js en Windows
  • Instalación de Node.js en Linux
• Aplicación ReactJS ya creada

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: 
   

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: 
   

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: 
   

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: 
   

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: