Mensaje de React Suite <Mensaje> Props

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente Mensaje permite al usuario mostrar consejos importantes en la página.

Propiedades de <mensaje>:

• classPrefix : se utiliza para indicar el prefijo de la clase CSS del componente.
• closable : Se utiliza para indicar si es posible cerrar el cuadro de mensaje. Es un valor booleano.
• children: Se utiliza para establecer el contenido del mensaje.
• duración : Se utiliza para retrasar el mensaje de cierre automático.
• full : Se utiliza para llenar el contenedor. Es un valor booleano.
• onClose : es una función de devolución de llamada que se activa después de que se cierra el mensaje.
• showIcon : Se utiliza para indicar si mostrar un icono. Es un valor booleano.
• header : Se utiliza para denotar el título del mensaje.
• tipo: Se utiliza para indicar el tipo de cuadro de mensaje. 

Enfoque : Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que mostrará React Suite <Message> Props .

Creando proyecto React :

Paso 1 : para crear una aplicación de reacción, debe instalar módulos de reacción a través del comando npx . Se usa “ npx ” en lugar de “ npm ” porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2 : después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3 : Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto : después de seguir los pasos anteriores, la estructura del proyecto se verá así:

Estructura del proyecto

Ejemplo 1 : estamos creando una interfaz de usuario que muestra diferentes accesorios de React Suite <Message>.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { Message } from 'rsuite';
  
export default function App() {
  
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite < Message > Props
            </h1> <br></br>
            <Message type="success" showIcon > 
                This is Success Message
            </Message>
            <Message type="error" showIcon > 
                This is Error Message
            </Message>
            <Message type="info" showIcon > 
                This is Informational Message
            </Message>
            <Message type="warning" showIcon > 
                This is Warning Message
            </Message>
        </div>
    );
}

Paso para ejecutar la aplicación : ejecute la aplicación usando 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 : estamos creando una interfaz de usuario que muestra diferentes <Message> Props de React Suite .

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { Message } from 'rsuite';
  
export default function App() {
  
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite < Message > Props
            </h1> <br></br>
            <Message type="success" 
                     header="Header 1" showIcon > 
                This is Success Message
            </Message>
            <Message type="error" 
                     header="Header 2" showIcon 
                     closable> 
                This is Error Message
            </Message>
            <Message type="info" 
                     header="Header 3" showIcon > 
                This is Informational Message
            </Message>
            <Message type="warning" 
                     header="Header 4" showIcon 
                     closable> 
                This is Warning Message
            </Message>
        </div>
    );
}

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

Mensajes que se pueden cerrar de React Suite

Referencia: https://rsuitejs.com/components/message/#code-lt-message-gt-code