Bootbox- Confirmation Modal in react

Many times while designing the web app, we come across a point where we need to ask the user whether he wants to proceed or not.

For example, while submitting a form, we can ask the user to confirm submitting it. In such situations , we need a confirmation modal.

For this example, let’s simply install a new react project, using create-react-app.

If you have not installed create-react-app globally, install it using the following command below.

npm i create-react-app -g

Use your company’s blog posts to opine on current industry topics, humanize your company, and show how your products and services can help people.

Now create the project repo, go inside the folder.

create-react-app testProject cd testProject

Install the following packages (bootstrap and react-bootbox) to use react-bootbox to implement confirmation modal.

npm i bootstrap react-bootbox –save

In the index.js file, import the bootstrap css

import ‘bootstrap/dist/css/bootstrap.css’;

Replace the code in App.js with the below code.

Here we imported the Bootbox , which is shown on the screen on the basis on props show. The message as well as the action on the buttons can be changed from the props. Lets run the app and see it its working fine.

npm start

We get the bootbox like below with the above code.

Happy Coding!