React Js Bootstrap Modal Popup Component Tutorial
Bootstrap offers tons of custom UI solutions. On top of that, it is easy to use and implement in React. If you are willing to know how to implement Bootstrap Modal dialog in React, then this step-by-step guide is for you.
In this short tutorial, we will learn how to quickly create a modal popup in React using the react-bootstrap and bootstrap modules.
React Bootstrap is used with Bootstrap. Ideally, react-bootstrap is built exclusively for Bootstrap’s javascript-based component.
It is considered one of the best UI frameworks for React js. Therefore we believe it will help us make react modal component with utmost ease.
How to Create Modal Component in React using Bootstrap
- Step 1: Generate React App
- Step 2: Make Component File
- Step 3: Install Bootstrap Modules
- Step 4: Create Modal Component
- Step 5: Update App.js File
- Step 6: Serve React Application
Generate React App
To generate the new react project, paste the following command on the command prompt and then invoke the command.
npx create-react-app react-modal
Move into the blank application’s root.
cd react-modal
Make Component File
Make the /components folder, in here we have to keep the react component files.
There after, create a new file name it /ModalDialog.js file and insert the following code within the file.
import React from 'react'
export default function ModalDialog() {
return (
<div>ModalDialog</div>
)
}
Install Bootstrap Modules
From the command prompt, run the following command; it will install bootstrap and react-bootstrap modules altogether in React app.
npm install react-bootstrap bootstrap
Create Modal Component
Open the ModalDialog.js component file. In this file, you have to carefully import the Modal, and Button modules from the ‘react-bootstrap’ library.
The useState hook is here to help us set and manage the modal popover state.
import React from 'react'
import { Modal, Button } from 'react-bootstrap'
function ModalDialog() {
const [isShow, invokeModal] = React.useState(false)
const initModal = () => {
return invokeModal(!false)
}
return (
<>
<Button variant="success" onClick={initModal}>
Open Modal
</Button>
<Modal show={isShow}>
<Modal.Header closeButton onClick={initModal}>
<Modal.Title>React Modal Popover Example</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={initModal}>
Close
</Button>
<Button variant="dark" onClick={initModal}>
Store
</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default ModalDialog
Update App.js File
The modal component is almost ready, the ModalDialog component has to go inside the App.js file.
It will now being served throughout our react app.
import React from 'react'
import ModalDialog from './components/ModalDialog'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
function App() {
return (
<div className="container mt-3">
<ModalDialog />
</div>
)
}
export default App
Serve React Application
In order to serve the react application on the browser make sure initialize the following command from the command-prompt.
npm start
You can check or run the application on the browser using given url:
http://localhost:3000
Conclusion
A modal dialog is extremely helpful in grabbing the user’s attention. It manifests on top of the primary content that deliberately gets users’ attention.
Throughout this guide, we explained how to create the modal dialog component in React using the bootstrap library and that too from scratch.