How to Use React-Bootstrap Modals in React Applications

1. Bootstrap 3 Modals in React
2. Bootstrap 4 & 5 Modals in React

You have probably come across modals before. They look like popups and appear after you click a specific button or perform some other action. You can feature them in your own React applications as well.

When used correctly, modals can improve the user experience of a React app.

They are very effective for drawing users’ attention to an essential feature of the website or getting their input. For instance, if your user accidentally clicked to delete an important UI item, you can use a modal to ask them if they’re sure of their choice.

When developing a React app, you can create a custom Modal component using regular JavaScript, HTML, and CSS. However, unless you’re sure you need a custom solution, you can save a lot of time by using a modal from a UI library like Bootstrap.

Bootstrap 3 Modals in React

React-Bootstrap is a version of the popular library adjusted for React. It provides custom React components with the same functionality and features as you’d expect from the original Bootstrap version 3.

Using a library like React-Bootstrap allows you to use common UI elements without writing them from scratch.

A Modal component imported from this library provides all the features you could need. Once you’ve imported it, you no longer need to go against patterns of React and mutate DOM directly.

You can install it by opening the shell and typing the following command:

npm install react-bootstrap

The best part about the react-bootstrap library is that it can import individual components separately. This way, you can minimize the package size and make your app load faster.

The easiest way to include a modal from the React-Bootstrap library is to declare an import statement at the top of your application:

import Modal from 'react-bootstrap/Modal';

The only drawback of the React-Bootstrap library is that it only supports Bootstrap 3.

React-Bootstrap library gives you a lot of freedom to customize the look and functionality of the Modal component. You can adjust its animation, position in the browser, and size, to name a few. Learn more about React-Bootstrap modals by reading the official guide.

Bootstrap 4 & 5 Modals in React

If you wish to use Bootstrap 4 or the newer version 5, your best option is to use the react-strap package. Since this package does not have its styles, you must install the core bootstrap package and import its CSS file.

To install the react-strap package, you must open the command line and enter the following code:

npm install reactstrap

Once installation is done, you can import the Modal component into your application. Here’s an example:

import React from 'react';
import { Modal } from 'reactstrap';

The Modal component is built specifically for React. You can customize its behavior by using props like isOpen, toggle, and size. You can even choose to enable or disable the fade animation.

The react-strap package gives you a lot of freedom to customize its components’ behavior. To learn more about the options at your disposal, check out official react-strap documentation.