Create bootstrap modal popup using reactstrap
Today we’ll show you how to create bootstrap modal popup using reactstrap. In the previous article, we had created a simple popup using CSS in React.
Here, we will use the reactstrap package for bootstrap modal popup. You can also use the reactstrap components for the page design.
Demo Application
Steps to create bootstrap modal popup using reactstrap
1. Create a react app and install dependencies
Let’s create a react application using the create-react-app npm package. Run the following command to create a react app.
1 | npx create-react-app bootstrap-modal-popup-reactstrap |
The reactstrap does not include Bootstrap CSS so Bootstrap needs to be installed as well. Run the following command to install the reactstrap and Bootstrap.
1 | npm i reactstrap bootstrap |
2. Create component for popup
Let’s create a simple component to design a popup using the Modals component. We have to import the bootstrap style along with the reactstrap component.
We have added the button to toggle the popup. Look at the following component code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import React, { useState } from 'react'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; function App() { const [modal, setModal] = useState(false); const togglePopup = () => setModal(!modal); return ( <div> <h5 classname="mb-3">Bootstrap modal popup using reactstrap - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5> <button color="danger" onclick={togglePopup}>Open Popup</button> <Modal isopen={modal} toggle={togglePopup}> <ModalHeader toggle={togglePopup}>Design your Popup</ModalHeader> <ModalBody> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </ModalBody> <ModalFooter> <button color="primary" onclick={togglePopup}>Done</button> <button color="secondary" onclick={togglePopup}>Cancel</button> </ModalFooter> </modal> </div> ); } export default App; |
We have added the toggle function in the Modal to close the modal popup using the esc key. Similarly, we are managing the close icon on the top-right side of the popup by passing the toggle function in the ModalHeader.
You can also check the other properties of the Modals component.
3. Output
Run the application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
