Métodos y accesorios de mensajes de React Suite

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 los métodos y accesorios de mensajes de React Suite . Se utiliza un componente de mensaje para mostrar consejos importantes en una página.

Accesorios de mensaje:

• children : Proporciona la información de descripción del mensaje.
• classPrefix : se utiliza para indicar el prefijo de la clase CSS del componente.
• cerrable : da si cerrar el cuadro de mensaje.
• full : Llena el contenedor de mensajes.
• header : Proporciona el título del mensaje.
• onClose : se llama después de que se cierra el mensaje.
• showIcon : Se utiliza para mostrar o no un icono.
• type : Muestra el tipo de cuadro de mensaje. Cuatro tipos incluyen información, advertencia, error y éxito.

UseToaster Method (Hook): useToaster es un método o gancho de reacción utilizado para crear y administrar las tostadoras en aplicaciones web.

• toaster.push(): se utiliza para enviar un mensaje y devolver una clave única.
• toaster.remove(): Se utiliza para eliminar un mensaje mediante una tecla.
• toaster.clear(): Se utiliza para cerrar todos los mensajes.

Sintaxis:

import { Message } from "rsuite";

Function App() {
    return (
        <Message closable type="warning" >
            ...
        </Message>
    );
}

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 el método useToaster.push de Message Prop.

import { Button, Message, useToaster } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    const toaster = useToaster();
  
    const message = (
        <Message showIcon type={'success'}>
            Hey Geek! Welcome to GeeksforGeeks.
        </Message>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Message Props and Methods
                </h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <Button onClick={() => toaster.push(message)}>
                        Push
                    </Button>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra el método useToaster.remove de Message Prop.

import { Button, Message, useToaster } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    const toaster = useToaster();
  
    const message = (
        <Message showIcon type={'success'}>
            Hey Geek! Welcome to GeeksforGeeks.
        </Message>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Message Props and Methods
                </h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <Button onClick={() => toaster.push(
                        message, { placement: 'topEnd' }
                    )}>
                        Push
                    </Button>
                    <Button onClick={() => toaster.remove()}>
                        Remove
                    </Button>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 3: El siguiente ejemplo demuestra el método useToaster.clear de Message Prop.

import { Button, Message, useToaster } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
  
    const toaster = useToaster();
  
    const message = (
        <Message showIcon type={'info'}>
            You have been successfully logged in.
        </Message>
    );
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Message Props and Methods
                </h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <Button onClick={() => toaster.push(
                        message, { placement: 'bottomCenter' }
                    )}>
                        Push
                    </Button>
                    <Button onClick={() => toaster.clear()}>
                        Clear
                    </Button>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia : https://rsuitejs.com/components/message/#props-amp-hooks