Iconos de mensajes de React Suite

Una suite de React 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 íconos de mensajes de React Suite. Se utiliza un componente de mensaje para mostrar consejos importantes en una página. React suite proporciona 4 tipos de íconos (información, advertencia, error, éxito) que se pueden usar con el componente de mensaje.

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.
• closable: 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.
• tipo: Muestra el tipo de cuadro de mensaje. Cuatro tipos incluyen información, advertencia, error y éxito.

Sintaxis:

//Import Statement
import { Message } from "rsuite";

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

Ejemplo 1: El siguiente ejemplo demuestra el mensaje básico con iconos.

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h3 style={{ color: 'green' }}>
                React Suite Message Icons</h3>
            <div>
                <Message showIcon type="info">
                    Want more info about GFG courses?
                </Message>
                <Message showIcon type="success">
                    Great! You purchased a course.
                </Message>
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: el siguiente ejemplo muestra el mensaje que se puede cerrar con iconos.

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h3 style={{ color: "green" }}>
                React Suite Message Icons</h3>
            <div>
                <Message showIcon closable type="warning" 
                    header="Warning">
                      Don't forget to check your email for 
                      the latest updates.
                </Message>
  
                <Message showIcon closable type="error" 
                    header="Error">
                        Something went wrong. Please try 
                        again later.
                </Message>
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/message/#icons