In this article, we will see how to add a bootstrap modal in react js. In this example, we will use the bootstrap modal and button component and also use the react-bootstrap library. You can also learn how to create a modal popup in react js.
For react modal popup example, we will install react-bootstrap using the npm and use the modal class to create a modal and launch the modal in the react js application.
So, let's see how to use bootstrap modal in react js and react modal popup on button click.
In this step, we will install bootstrap using the npm. So, let's follow the below command and install bootstrap.
npm install react-bootstrap bootstrap
After successfully installing bootstrap, we need to import bootstrap CSS in the src/index.js file.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Now, we will create a bootstrap modal. So, add the below code in the app.js file.
src/App.js
import React, {useState} from 'react';
import { Button, Modal } from 'react-bootstrap';
import "./styles.css";
function App() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<div className="container">
<h2>How To Add Bootstrap Modal In React JS - Websolutionstuff</h2>
<Button variant="primary" onClick={handleShow}>
Open Model
</Button>
<Modal size="lg" show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>How To Add Bootstrap Modal In React JS - Websolutionstuff</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="primary" onClick={handleClose}>
Save
</Button>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
export default App;
In this step, we will add CSS to the styles.css file
.App {
font-family: sans-serif;
text-align: center;
}
h2{
margin-bottom: 20px;
margin-top: 60px;
}
Output:
You might also like:
In this article, we will see how to increase session timeout in laravel. In this example, we can see how to se...
Jun-28-2020
In this post, I will show you how to break lines for Textarea in laravel blade. Many times when you save...
Jul-26-2020
Hey there! I recently needed to upgrade my PHP version from 8.0 to the latest 8.1 on my Ubuntu server. It's a smart...
Nov-03-2023
In this example we will see how to upload multiple image in laravel 8. here, we wil see tutorial of multiple image uploa...
Sep-17-2021