React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to use and implement in React. If you are willing to know how to implement Bootstrap Modal dialog in React, then this step-by-step guide is for you.

In this short tutorial, we will learn how to quickly create a modal popup in React using the react-bootstrap and bootstrap modules.

React Bootstrap is used with Bootstrap. Ideally, react-bootstrap is built exclusively for Bootstrap’s javascript-based component.

It is considered one of the best UI frameworks for React js. Therefore we believe it will help us make react modal component with utmost ease.

How to Create Modal Component in React using Bootstrap

• Step 1: Generate React App
• Step 2: Make Component File
• Step 3: Install Bootstrap Modules
• Step 4: Create Modal Component
• Step 5: Update App.js File
• Step 6: Serve React Application

Generate React App

To generate the new react project, paste the following command on the command prompt and then invoke the command.

npx create-react-app react-modal

Move into the blank application’s root.

cd react-modal

Make Component File

Make the /components folder, in here we have to keep the react component files.

There after, create a new file name it /ModalDialog.js file and insert the following code within the file.

import React from 'react'

export default function ModalDialog() {
  return (
    <div>ModalDialog</div>
  )
}

Install Bootstrap Modules

From the command prompt, run the following command; it will install bootstrap and react-bootstrap modules altogether in React app.

npm install react-bootstrap bootstrap

Create Modal Component

Open the ModalDialog.js component file. In this file, you have to carefully import the Modal, and Button modules from the ‘react-bootstrap’ library.

The useState hook is here to help us set and manage the modal popover state.

import React from 'react'
import { Modal, Button } from 'react-bootstrap'

function ModalDialog() {
  const [isShow, invokeModal] = React.useState(false)
  const initModal = () => {
    return invokeModal(!false)
  }

  return (
    <>
      <Button variant="success" onClick={initModal}>
        Open Modal
      </Button>

      <Modal show={isShow}>
        <Modal.Header closeButton onClick={initModal}>
          <Modal.Title>React Modal Popover Example</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="danger" onClick={initModal}>
            Close
          </Button>
          <Button variant="dark" onClick={initModal}>
            Store
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

export default ModalDialog

Update App.js File

The modal component is almost ready, the ModalDialog component has to go inside the App.js file.

It will now being served throughout our react app.

import React from 'react'

import ModalDialog from './components/ModalDialog'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

function App() {
  return (
    <div className="container mt-3">
      <ModalDialog />
    </div>
  )
}

export default App

Serve React Application

In order to serve the react application on the browser make sure initialize the following command from the command-prompt.

npm start

You can check or run the application on the browser using given url:

http://localhost:3000

Conclusion

A modal dialog is extremely helpful in grabbing the user’s attention. It manifests on top of the primary content that deliberately gets users’ attention.

Throughout this guide, we explained how to create the modal dialog component in React using the bootstrap library and that too from scratch.