How To Create Boostrap Modal In ReactJs

Introduction

In this article, we will learn to create a new ReactJs project using npm new command, After that, we will explain how to create Reactjs bootstrap modal in Visual Studio code.

Create Boostrap Modal in ReactJs

Now we will start by creating a new project. 

Step 1 

Create a React project setup using the below commands or however, you create your React app. 

npx create-react-app projectname

Example,

npx create-react-app sample-modal 

Step 2

Installing React Bootstrap 

Open a new terminal and run the following below commands.  

Install Bootstrap as a dependency in your app. 

npm install react-bootstrap bootstrap 

Now, open the App.js file and import Bootstrap. 

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

Step 3 

Create Project Folder structure, 

Step 4

Now, we will start import the above component into the app.js file 

import React, { useState } from 'react'; 
import './App.css'; 
import 'bootstrap/dist/css/bootstrap.min.css';  

And below  import the react boostarp modal  

import { Modal, Button } from "react-bootstrap"; 

Add the following modal popup code in this component 

<Button variant="primary" onClick={handleShow}> 
  click modal 
</Button> 

<Modal show={show} onHide={handleClose}> 
  <Modal.Header closeButton> 
    <Modal.Title>Modal heading</Modal.Title> 
  </Modal.Header> 
  <Modal.Body>Hello,you're reading this text in a modal!</Modal.Body> 
  <Modal.Footer> 
    <Button variant="secondary" onClick={handleClose}> 
      Close 
    </Button> 
    <Button variant="primary" onClick={handleClose}> 
      Save Changes 
    </Button> 
  </Modal.Footer> 
</Modal> 

Above we created app component. The App component will be used as a modal popup. Modal popup handle the set, show hide event as below 

const [show, setShow] = useState(false); 
const handleClose = () => setShow(false); 
const handleShow = () => setShow(true); 

Step 5

Src/App.js code

import React, { useState } from 'react'; 
import './App.css'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 
import { Modal, Button } from "react-bootstrap"; 
function App() { 
  const [show, setShow] = useState(false); 
  const handleClose = () => setShow(false); 
  const handleShow = () => setShow(true); 
  return ( 
    <> 
      <Button variant="primary" onClick={handleShow}> 
        click modal 
      </Button> 
      <Modal show={show} onHide={handleClose}> 
        <Modal.Header closeButton> 
          <Modal.Title>Modal heading</Modal.Title> 
        </Modal.Header> 
        <Modal.Body>Hello,you're reading this text in a modal!</Modal.Body> 
        <Modal.Footer> 
          <Button variant="secondary" onClick={handleClose}> 
            Close 
          </Button> 
          <Button variant="primary" onClick={handleClose}> 
            Save Changes 
          </Button> 
        </Modal.Footer> 
      </Modal> 
    </> 
  ); 
}
export default App;

Step 6

Now we will run the application by using the 'npm run start' command and check output on the browser

Summary 

In this article, we learned how to implement modal react bootstrap in a ReactJS application. First of all create a new project in command prompt then we can install react bootstrap and create button then we can click the button showing the modal popup.