Accesorios de React Suite <Modal.Header>

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. Los componentes modales se utilizan para crear cuadros de diálogo, cajas de luz, ventanas emergentes, etc.

Un componente modal tiene tres áreas distintas: un encabezado, el cuerpo y un pie de página. En este artículo, veremos la parte del encabezado.

El componente <Modal.Header> se utiliza para definir el encabezado de un componente modal.

Los accesorios son:

• as: Denota el tipo de elemento del componente. Es ‘div’ por defecto, pero se puede personalizar el elemento para este componente.
• classPrefix: esto denota el prefijo de la clase CSS del componente. Especificar cualquier valor aquí cambiará el nombre de la clase del Componente. Esto puede ser útil para aplicar un estilo personalizado basado en el nombre de la clase. El valor predeterminado es «modal-header».
• closeButton: Es un valor booleano. Define si mostrar o no el botón de cerrar. Es cierto por defecto.
• onClose: se activa una función de devolución de llamada cuando se cierra el componente.

Sintaxis:

<Modal> 
  <Modal.Header>....</Modal.Header>
</Modal>

Requisito previo:

• Introducción e instalación reactJS
• Componente modal de React Suite
• Gancho de reacción useState

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

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app.

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

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

npm start

Ejemplo 1: estamos importando el componente modal de rsuite y, para aplicar los estilos predeterminados de los componentes, estamos importando «rsuite/dist/rsuite.min.css».

También usamos useState de gancho de reacción para crear un estado abierto que inicialmente es falso. Creamos un botón abierto con una función onClick handleOpen que establece el estado abierto en verdadero.

Luego estamos agregando el componente Modal, y estamos pasando abierto con el estado abierto que hemos creado. Ahora estamos agregando el <Modal.Header> y dentro de las etiquetas, estamos agregando texto.

En el primer componente, le estamos pasando el accesorio que se puede cerrar, y a los siguientes dos componentes, le estamos pasando accesorios como «h1» y «em», respectivamente.

import { useState } from "react";
import { Modal } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const [open, setOpen] = useState(false);
    const handleOpen = () => {
        setOpen(true);
    };
  
    return (
        <div className="App">
            <h4> React Suite Modal Header Prop</h4>
            <button onClick={handleOpen}>open</button>
            <Modal open={open}>
                <Modal.Header closeButton>Modal Header 1</Modal.Header>
                <Modal.Header as="h1">Modal Header 2</Modal.Header>
                <Modal.Header as="em">Modal Header 3</Modal.Header>
            </Modal>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: al componente <Modal.Header> ahora estamos agregando prop classPrefix con diferentes valores y también hemos agregado una función onClose al último componente <Modal.Header> que muestra «el encabezado modal se cerrará» en una alerta.

import { useState } from "react";
import { Modal } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const [open, setOpen] = useState(false);
    const handleOpen = () => {
        setOpen(true);
    };
  
    const handleClose = () => {
        alert("modal header will close");
        setOpen(false);
    };
  
    return (
        <div className="App">
            <h4> React Suite Modal Header Prop</h4>
            <button onClick={handleOpen}>open</button>
            <Modal open={open}>
                <Modal.Header>Modal Header 1</Modal.Header>
                <Modal.Header classPrefix="modal-title"
                    closeButton={false}>
                    Modal Header 2
                </Modal.Header>
                <Modal.Header classPrefix="btn" 
                    onClose={handleClose}>
                    Modal Header 3
                </Modal.Header>
            </Modal>
        </div>
    );
}
  
export default App;

Producción:

 

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