Componente modal React-Bootstrap

React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. El componente modal proporciona, podemos usar el siguiente enfoque en ReactJS para usar el componente modal de arranque de reacción.

Accesorios modales:

• animación: se usa para agregar una animación de fundido cuando Modal está abierto y cerrado.
• autoFocus: cuando el modal está abierto, se usa para cambiar automáticamente el enfoque a sí mismo y reemplazarlo con el último elemento enfocado cuando se cierra cuando este atributo se establece en verdadero.
• telón de fondo: se utiliza para incluir un componente de fondo.
• backdropClassName: se usa para agregar un nombre de clase adicional opcional a .modal-backdrop 
• centrado: Se utiliza para centrar verticalmente el Diálogo que está abierto en la ventana.
• container: Es el atributo container, y es de tipo any.
• aria-labelledby: Es el atributo aria-labelledby , y es de tipo any.
• contentClassName: se usa para agregar un nombre de clase adicional opcional a .modal-content
• dialogAs: es un tipo de componente que ayuda a proporcionar el marcado de contenido modal.
• dialogClassName: es el nombre de clase para el diálogo.
• enforceFocus: el modal evitará que el foco deje el modal mientras está abierto cuando se establece en verdadero.
• teclado: Cuando se presiona la tecla escape, se cierra el modal.
• administrador: para rastrear y administrar el estado de Modals abiertos, se utiliza una instancia de ModalManager.
• onEnter: se utiliza para desenstringr una devolución de llamada antes de que entre Modal.
• onEntered: se utiliza para desenstringr una devolución de llamada después de que Modal finalice la transición.
• onEntering: se usa para activar una devolución de llamada cuando Modal comienza a hacer la transición.
• onEscapeKeyDown: se utiliza para activar una devolución de llamada cuando se presiona la tecla de escape.
• onExit: se utiliza para desenstringr una devolución de llamada en las transiciones Modal.
• onExited: se utiliza para desenstringr una devolución de llamada después de que Modal finalice la transición.
• onExiting: se utiliza para activar una devolución de llamada cuando el Modal comienza a salir.
• onHide: se utiliza para activar una devolución de llamada cuando se hace clic en el fondo no estático del encabezado o en el botón de cierre.
• onShow: se utiliza para activar una devolución de llamada cuando se abre Modal.
• restoreFocus: se utiliza para restaurar el foco a elementos previamente enfocados cuando el modal está oculto.
• restoreFocusOptions: cuando restoreFocus se establece en verdadero, es el conjunto de opciones que se pasan a la función de enfoque.
• scrollable: Se utiliza en condición de desbordamiento, y permite desplazar el <Modal.Body> en lugar de todo el modal.
• show: Se utiliza para mostrar el modal.
• tamaño: se utiliza para representar el tamaño de nuestro modal.
• bsPrefijo: CSS

• centrado: Se utiliza para indicar si el componente debe estar centrado verticalmente o no.
• la
• scrollable: Se utiliza para permitir el desplazamiento de <Modal.Body> en lugar del modal completo.
• tamaño: se utiliza para representar el tamaño de nuestro modal.
• bsPrefijo: CSS

• closeButton: Se utiliza para especificar si el modal debe tener un botón de cierre o no.
• closeLabel: Se utiliza para p
• onHide: es una devolución de llamada que se activa cuando se hace clic en el botón de cerrar.
• bsPrefijo: CSS

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• bsPrefijo: CSS

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• bsPrefijo: CSS

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• bsPrefijo: CSS

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

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

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

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

  npm install react-bootstrap 
  npm install bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
  
export default function App() {
  return (
    <div style={{ display: 'block',
                  width: 700, 
                  padding: 30 }}>
      <h4>React-Bootstrap Modal Component</h4>
      <Modal.Dialog>
        <Modal.Header closeButton>
          <Modal.Title>
           Sample Modal Heading
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>
           This is the sample text for our Modal
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary">
           Save changes
          </Button>
          <Button variant="secondary">
           Close
          </Button>
        </Modal.Footer>
      </Modal.Dialog>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando 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:

Referencia: https://react-bootstrap.github.io/components/modal/