I am explaining you, how to use react-bootstrap modal in ReactJS.
you are familiar with the alert() message box it is visible/show on the header of the page. but it is not interactive. so we need to use bootstrap modal popup in reactJS. it is easily integrate and use in ReactJS application. here my current component name is Unity.
if you want to react-bootstrap so you need to install react-bootstrap and bootstrap package in ReactJS. below I mentioning you package install command through npm.
npm install react-bootstrap
npm install bootstrap
// or
npm install react-bootstrap bootstrap
Here, I am explaining you how to use react-bootstrap and create modal popup in reactJS.
Example :
import React,{useState} from 'react';
import {Modal, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function Unity() {
const [getvisible, setVisible] = useState(false);
const btnPopupClose = () => setVisible(false);
const btnPopupShow = () => setVisible(true);
return (
<><div><h4>How to use react-bootstrap modal in ReactJS</h4>
<Button onClick={btnPopupShow}>
Click to open Popup
</Button>
<Modal show={getvisible} onHide={btnPopupClose}>
<Modal.Header closeButton>
<Modal.Title>Popup Header</Modal.Title>
</Modal.Header>
<Modal.Body>Welcome! To WebDeveloperIndia.in Website. I am explaining react-bootstrap modal.</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={btnPopupClose}>
Close
</Button>
<Button variant="success" onClick={btnPopupClose}>
Save
</Button>
</Modal.Footer>
</Modal>
</div></>
);
}
export default Unity;
Output :
Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket, jQuery, Ajax, Javascript and ReactJS.