React-Bootstrap Modal Component

React-Bootstrap is a front-end framework that was designed keeping react in mind. Modal Component provides a way to add dialogs to our website for user notifications, displaying information, or to display completely custom information to the user. We can use the following approach in ReactJS to use the react-bootstrap Modal Component.

Modal Props:

• animation: It is used to add a fade animation when Modal is open and closed.
• autoFocus: When the modal is open, it is used to automatically shift focus to itself and replace it with the last focused element when it closes when this attribute is set to true.
• backdrop: It is used to include a backdrop component.
• backdropClassName: It is used to add an optional extra class name to .modal-backdrop 
• centered: It is used to vertically center the Dialog which is open in the window.
• container: It is the container attribute, and it is of type any.
• aria-labelledby: It is the aria-labelledby attribute, and it is of type any.
• contentClassName: It is used to add an optional extra class name to .modal-content
• dialogAs: It is a Component type that helps in providing the modal content Markup.
• dialogClassName: It is the className for the dialog.
• enforceFocus: The modal will prevent focus from leaving the Modal while open when it is set to true.
• keyboard: When the escape key is pressed, it closes the modal.
• manager: In order to track and manage the state of open Modals, a ModalManager instance is used.
• onEnter: It is used to trigger a callback before the Modal transitions in.
• onEntered: It is used to trigger a callback after the Modal finishes transitioning in.
• onEntering: It is used to trigger a callback when Modal begins to transition in.
• onEscapeKeyDown: It is used to trigger a callback when the escape key is pressed.
• onExit: It is used to trigger a callback before the Modal transitions out.
• onExited: It is used to trigger a callback after the Modal finishes transitioning out.
• onExiting: It is used to trigger a callback when the Modal begins to transition out.
• onHide: It is used to trigger a callback when the header non-static backdrop or closeButton is clicked.
• onShow: It is used to trigger a callback when the Modal is opening.
• restoreFocus: It is used to restore focus to previously focused elements when modal is hidden.
• restoreFocusOptions: When restoreFocus is set to true, It is the set of option which are passed to focus function.
• scrollable: It is used in an overflow condition, and it allows scrolling the <Modal.Body> instead of the entire modal.
• show: It is used to show the modal.
• size: It is used to render the size of our modal.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Modal.Dialog Props:

• centered: It is used to indicate whether the component should be vertical centered or not.
• contentClassName: It is used to add the content class name for styling.
• scrollable: It is used to allow the scrolling of <Modal.Body> instead of the complete modal.
• size: It is used to render the size of our modal.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Modal.Header Props:

• closeButton: It is used to specify whether the modal should have a close button or not.
• closeLabel: It is used to provide an accessible label for the close button.
• onHide: It is a callback that is trigger when the close button is clicked.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Modal.Title Props:

• as: It can be used as a custom element type for this component.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Modal.Body Props:

• as: It can be used as a custom element type for this component.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Modal.Footer Props:

• as: It can be used as a custom element type for this component.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command:

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

• Step 3: After creating the ReactJS application, Install the required module using the following command:

  npm install react-bootstrap 
  npm install bootstrap

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

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>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: