Notificación de React Suite con tostadora

React Suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre la notificación de React Suite con Toaster . El componente de notificación se utiliza para mostrar un mensaje de notificación globalmente. La notificación también se usa con una tostadora en aplicaciones basadas en reacciones.

Notificación de React Suite con accesorios de tostadora:

• children : Da la descripción del cuadro de mensaje.
• cerrable : se utiliza para agregar un botón de eliminación.
• duración : Se utiliza para retrasar la notificación de cierre automático, solo efectivo cuando se usa en combinación con una tostadora.
• encabezado : se utiliza para indicar el título del cuadro de mensaje.
• onClose : es una función de devolución de llamada que se llama al cerrar el cuadro de notificación.
• colocación : Se utiliza para la colocación del cuadro de mensaje.
• type : Se utiliza para indicar el tipo de cuadro de mensaje.

Métodos de tostadora:

• toaster.push(): este método se utiliza para enviar un mensaje.
• toaster.remove(): este método se usa para eliminar un mensaje por clave .
• toaster.clear(): este método se utiliza para borrar todos los mensajes.

Sintaxis: 

<Notification type={'info'} 
    header={'Info'} closable>
    ....
</Notification>

<Button onClick={() => toaster.push('Message', 
    { placement: 'bottomCenter' })}>
    ...
</Button>

Creación de la aplicación React e instalación del módulo:

Paso 1 : Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: El siguiente ejemplo demuestra la notificación básica con el componente tostador.

import { Button, Notification, useToaster } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    const toaster = useToaster();
  
    const message = (
        <Notification type={'success'} 
                      header={'Success'} 
                      closable>
            <h4>
                You have successfully send the message.
            </h4>
        </Notification>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Notification with toaster
                </h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <Button onClick={() => 
                        toaster.push(
                            message, 
                            { placement: 'topCenter' }
                        )}>
                            Send
                    </Button>
                </div>
            </div>
        </center>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

 

Ejemplo 2: El siguiente ejemplo muestra la notificación con una tostadora de duración personalizada.

import { Button, Notification, useToaster } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    const toaster = useToaster();
  
    const message = (
        <Notification type={'info'} 
                      header={'Info'} 
                      closable 
                      duration={5000}>
            <h4>
                Your message has been delayed by 5 sec.
            </h4>
        </Notification>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Notification with toaster
                </h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <Button onClick={() => 
                        toaster.push(
                            message, 
                            { placement: 'bottomCenter' }
                        )}>
                            Send
                    </Button>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/notification/#with-toaster