Create bootstrap modal popup using reactstrap

Today we’ll show you how to create bootstrap modal popup using reactstrap. In the previous article, we had created a simple popup using CSS in React.

Here, we will use the reactstrap package for bootstrap modal popup. You can also use the reactstrap components for the page design.

Demo Application

Output - Create bootstrap modal popup using reactstrap - Clue Mediator

Steps to create bootstrap modal popup using reactstrap

Create a react app and install dependencies
Create component for popup
Output

1. Create a react app and install dependencies

Let’s create a react application using the `create-react-app` npm package. Run the following command to create a react app.

npx create-react-app bootstrap-modal-popup-reactstrap

The reactstrap does not include Bootstrap CSS so Bootstrap needs to be installed as well. Run the following command to install the reactstrap and Bootstrap.

npm i reactstrap bootstrap

2. Create component for popup

Let’s create a simple component to design a popup using the Modals component. We have to import the bootstrap style along with the reactstrap component.

We have added the button to toggle the popup. Look at the following component code.

App.js

import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  const [modal, setModal] = useState(false);
  const togglePopup = () => setModal(!modal);

  return (
    <div>
      <h5 class="mb-3">Bootstrap modal popup using reactstrap - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>
      <button color="danger" onclick={togglePopup}>Open Popup</button>

      <modal isopen={modal} toggle={togglePopup}>
        <modalheader toggle={togglePopup}>Design your Popup</modalheader>
        <modalbody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </modalbody>
        <modalfooter>
          <button color="primary" onclick={togglePopup}>Done</button>
          <button color="secondary" onclick={togglePopup}>Cancel</button>
        </modalfooter>
      </modal>
    </div>
  );
}

export default App;

We have added the `toggle` function in the `Modal` to close the modal popup using the `esc` key. Similarly, we are managing the close icon on the top-right side of the popup by passing the `toggle` function in the `ModalHeader`.

You can also check the other properties of the Modals component.

3. Output

Run the application and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project