React Bootstrap Modals
Introduction
In frontend development, developers have to build the user interface (UI) with user experience (UX) in mind. Modals are window components that allow an app to display user notifications, dialogues, or custom content in an overlayed window above the main one. They are ideal in terms of communicating notifications and dialogues to users during. This enriches the UX by enabling a cleaner and more intuitive UI.
Say you are a React developer working on an exciting project for your startup: a fintech product that is web-based. As the developer, you are mainly required to build a simple and intuitive UI that also has a smooth UX. A particular page on the site is performing a sensitive action, fund transfer. The user has to be really sure that they want to do this. To ask for the user's confirmation, you decide to develop a notification and dialogue component that will inform the user that they are about to perform a sensitive action and ask if they wish to cancel or proceed. The component will be a modal.
In this guide, you will learn how to develop a bootstrap modal that would fit this requirement using React.js. The guide assumes that you have basic knowledge of React.js (at least beginner level).
Set Up a Sample App
Open your terminal and run these commands to create a basic React app.
1npx create-react-app react-bootstrap-modal
2
3cd react-bootstrap-modal
4
5npm startInclude react-bootstrap in your basic React app.
1npm install react-bootstrap bootstrapDelete the code in the newly created app.js file and paste the sample code below.
1import React, {Component} from 'react';
2
3class App extends Component{
4 constructor(props) {
5 super(props);
6
7 }
8
9 render() {
10 return (
11 <div>
12
13 </div>
14 );
15 }
16
17}
18
19
20export default App;In your app.js file, include the stylesheet as well.
1import 'bootstrap/dist/css/bootstrap.min.css';You can now import bootstrap components.For example:
1import { Modal } from 'react-bootstrap';Set Up the Modal
In the sample code below, you will create a simple form that, when the user submits, will show a confirmation modal. Both the form and button are React Bootstrap components. Copy and paste the sample code below.
1import React, {Component} from 'react';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import {Row, Button,Col, Form, Card} from "react-bootstrap";
4
5class App extends Component{
6 constructor(props) {
7 super(props);
8
9 }
10
11 render() {
12 return (
13 <Row className="justify-content-md-center">
14 <Col lg={4}>
15
16 <Card style={{ width: '20rem' }}>
17 <Card.Body>
18 <Card.Text>
19 <Form>
20 <Form.Group controlId="formBasic">
21 <Form.Label>Transfer Funds</Form.Label>
22 <Form.Control type="Name" placeholder="Enter Name" />
23
24 </Form.Group>
25
26 <Form.Group controlId="formBasicPassword">
27 <Form.Label>Amount</Form.Label>
28 <Form.Control type="number" placeholder="Amount" />
29 </Form.Group>
30
31 <Button variant="primary" type="submit">
32 Submit
33 </Button>
34 </Form>
35 </Card.Text>
36 </Card.Body>
37 </Card>
38 </Col>
39 </Row>
40 );
41 }
42}
43export default App;The code above illustrates a simple form used to input details. Once the submit button is clicked, a confirmation modal will pop up and the user will be asked to confirm the transaction.
Set up the modal. In this case, you will render the modal in a separate function. Copy and paste the code below.
1import React, {Component} from 'react';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import {Modal, Row, Button,Col, Form, Card} from "react-bootstrap";
4
5class App extends Component{
6 constructor(props) {
7 super(props);
8 this.state = ({
9 show: false,
10 })
11
12 this.handleClose = this.handleClose.bind(this);
13 this.handleShowModal = this.handleShowModal.bind(this);
14 }
15
16 handleShowModal(){
17 this.setState({
18 show: true
19 })
20 }
21
22 handleClose(){
23 this.setState({
24 show:false
25 })
26 }
27
28 renderModal() {
29
30 return (
31 <Modal show={this.state.show} onHide={this.handleClose} backdrop="static">
32 <Modal.Header closeButton>
33 <Modal.Title>Confirm Transaction</Modal.Title>
34 </Modal.Header>
35 <Modal.Body>You are about to transfer funds to John Doe. Do you wish to continue?</Modal.Body>
36 <Modal.Footer>
37 <Button variant="primary" onClick={this.handleClose}>
38 Proceed
39 </Button>
40 <Button variant="danger" onClick={this.handleClose}>
41 Cancel
42 </Button>
43 </Modal.Footer>
44 </Modal>
45 )
46
47 }
48
49 render() {
50 return (
51 <Row className="justify-content-md-center">
52 <Col lg={4}>
53 <Card style={{ width: '20rem' }}>
54 <Card.Body>
55 <Card.Text>
56 <Form>
57 <Form.Group controlId="formBasicName">
58 <Form.Label>Transfer Funds</Form.Label>
59 <Form.Control type="name" placeholder="Enter Name" />
60 </Form.Group>
61 <Form.Group controlId="formBasicAmount">
62 <Form.Label>Amount</Form.Label>
63 <Form.Control type="number" placeholder="Amount" />
64 </Form.Group>
65 <Button variant="primary"
66 onClick={this.handleShowModal}
67 >
68 Transfer
69 </Button>
70 </Form>
71 </Card.Text>
72 </Card.Body>
73 </Card>
74 </Col>
75
76 <Col>
77 {this.renderModal()}
78 </Col>
79 </Row>
80 );
81 }
82}
83
84export default App;In the example above, the rendermodal() function renders your modal. In the constructor,
you initialize a state called show. This state is false when the page loads.
This state will be responsible for showing your modal.
Once the submit button is clicked, the handleShowModal() function sets your
state to true and the modal is shown.
The handleClose() is responsible for hiding your modal and sets your show state to
false. For good practice, the sample renders the modal in a separate function.
Also, to ensure the user doesn't ignore the modal or to enforce modal focus,
you can add backdrop="static".
Conclusion
In this guide, you have developed a bootstrap modal using React.js. This knowledge is vital to developers in frontend and React developer positions.
To further build on this guide, the next challenge would be to develop a modal using custom hooks and a context API. A resource to get you started can be found here.