React Bootstrap Modal Popup Example

By Hardik Savani | May 17, 2020 | Category : React JS


In this post, we will learn react bootstrap modal dialog example. We will use react bootstrap modal example. In this article, we will implement a modal popup in react js bootstrap. step by step explain how to use bootstrap modal in react js.

I will show you how to use bootstrap model in react application. you have to just simple follow few step to done simple example of bootstrap model popup in react js. in this example we will install react-bootstrap and use their model class to lunch modal in react app.

just follow few step to add bootstrap modal in react native app.

Preview:

Install react-bootstrap

Now here, we have to install bootstrap using npm react-bootstrap command. so let's run bellow command to install bootstrap in react.

npm install react-bootstrap bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

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

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

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

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

serviceWorker.unregister();

Modal Popup Code

in our App.js file, we will write code for open simple bootstrap 4 modal popup using react-bootstrap library. let's add bellow code:

src/App.js

import React, {useState} from 'react';

import logo from './logo.svg';

import './App.css';

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

function App() {

const [show, setShow] = useState(false);

const handleClose = () => setShow(false);

const handleShow = () => setShow(true);

return (

<div className="container">

<h1>React Bootstrap Modal Example - ItSolutionStuff.com</h1>

<Button variant="primary" onClick={handleShow}>

Open Demo Model

</Button>

<Modal size="lg" show={show} onHide={handleClose}>

<Modal.Header closeButton>

<Modal.Title>React Bootstrap Modal Example - ItSolutionStuff.com</Modal.Title>

</Modal.Header>

<Modal.Body>

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</Modal.Body>

<Modal.Footer>

<Button variant="secondary" onClick={handleClose}>

Close

</Button>

<Button variant="primary" onClick={handleClose}>

Save It!

</Button>

</Modal.Footer>

</Modal>

</div>

);

}

export default App;

Now we are ready to run our example by bellow command:

npm start

Now you can check it. it's layout as like above.

I hope it can help you...



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: