How to Create Popup Modal In React
Tags: react, beginners, webdev, javascript
Published: 2022-12-21 05:48:49

After some explorations and make any projects. I found that create the modal kind a like an easy task when building web application with react, But most of the beginner will confused at the first time. 

This article is purposed to beginner of developer that work with react project. If you're already know about this concept You can skip this content, or just give me any of approach in the comment below.

Opps, to see the result of this project, you can see the preview at [https://modal-in-react.vercel.app/](https://modal-in-react.vercel.app/)

In this example you will find the 3 way to make any modal or popup, alert in your react application. 

- Create Simple Modal
- Create Modal Using State Manager
- Create Modal Using React Context

The different approach may work for you and your project. This method can you pick based on your project scope and possibility.


But in this article i will share about simple and traditional modal. Please waiting, i will make the article in the next day. 


## Concept

Before we just let me explain about the concept behind the modal and how it's work. Today i will explain to you what should be inside the modal to make it become more attractive and reactive with this several points.

1. Define Modal layout
2. Styling Modal 
3. Show & Hide Modal
4. Close Modal When Outside Clicked
5. Close Modal When `Esc` Pressed
6. Adding Confirm & Cancel Button



## 1. Define Modal Layout

Ok, when we create a modal we need to structure the modal base on the purpose and the design. But in general modal contain the `header`, `body`, and `footer` section. You can see the detail in the image below.


![Modal Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nc4rextmgbhmpfhrbpfl.png)


As you can see above the modal layout, in each of section will use for different function. Header mainly to show the title of modal, You can put the content in the body of your modal. Then the footer use to show the confirm, cancel, and any action button that user can pick and click.

To start let's create a new modal component call `SimpleModal.js`, then inside you need to create a react component.


![Modal Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ywtk12i4m6gqqjee9w6.png)


We should pass some of props like `show`, `onClose`, `onConfirm`, and `onCancel`. I will explain all of the passed props later. 

We also create some class style for the modal. `.modal-backdrop` will cover all of the modal and showing as fixed element, including showing the backdrop background. Then following with the `.modal-content` that include the element like `modal-header`, `modal-body`, and `modal-footer`.


## 2. Styling Modal

to styling the modal we can easily add the css to the components. Create a file call `main.css` then import it into the components


![Modal Backdrop Style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7eod2o8jxl60skqfmll.png)

![Modal Content Style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ier1pdhq5stgpkmmmidu.jpeg)


![Modal Header Style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd9tg7senwlg86ymd5sc.jpeg)

![Modal Body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsr1tdp47xczue9c1jlb.jpeg)

![Modal Footer Style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncdlx563rgnbyrrq0gcx.png)


You, also can add some element and change the style based on your preference.


## 3. Show & Hide Modal

The most important thing in modal in react is the way to show and hide. In this post we're just cover to manage show and hide using simple state method. 

Add a state to your parent component , where the modal will be placed. This state will be used to manage the show and hide of the modal. 


![State of Modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fy8wbyb0j9tl0dexnv8j.png)

create the hide and show method that will manipulate the state. 

![Show hide method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h58gokuzbk550ydsjmn.png)

After all, we should pass the function and state into the component props to the children.


![Pass props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc7puxu2u10l4fo6sbx7.png)

Now to make this work, you should create a button to trigger to show the modal. Now to make this work we should modify the content of modal and ensure to show the modal only if the show props is equals to `true`. 


![Only Show if show true](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2j8qkgoivx167iay1ju.png)


## 4. Close Modal When Outside Clicked

Some modal also will be closed if the user click outside of the modal element, or user click on other components. This is very interesting feature and you should implement in every popup on react. 

To make this work is very simple by identify the element that clicked by the user. And if the element is not the modal, the modal will be closed. 

OK, first we should do is to add the listener via the `useEffect`

![Implement Listener when clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p00nzyr58opghkrpq3by.jpeg)

Now we will handle the function of listener when the user clicked the mouse. We need to create the ref for modal first, then pass the ref of modal into the modal content. Then inside the method, we will ensure all deps, and props was define. The next step is to check if the element of clicked is contain the modal element. if now we will call the close function that we pass from the props. 



![Close modal when clicked outside](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3n6l6rbkb6znvid03w79.png)


Now, if the user click outside of the content element, or in backdrop. The modal will be automatically closed.

## 5. Close Modal When `Esc` Pressed

To implement this feature, basically same like implement the outside click. The difference is we need to listen to the `keydown` event and also close if the key pressed is `Escape`.


![Close Modal When `Esc` key pressed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzqssbw31eoeje6rhquv.png)


## 6. Adding Confirm & Cancel Button

The modal also need to contain at least confirm button. This will trigger the modal to close and do another action like saving data, delete and more. 

We need to create couple button element inside the modal footer. then add the clicked function to handle the button trigger. 


![Adding Confirm & Cancel Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uns8jrqexbv5m7gwdyww.png)


To use the confirm and cancel button and adding some callback when it's clicked we need to pass methods from the component props.

![Adding confirm & Close Callback](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/501oxi96omv9m7wel5dg.png)

Good job bro. Now you're have a super rich modal with many feature. 


## What's Next ?

This article is just teach you about make an simple modal with simple design. However in many case you also need to make very complicated design of modal. Also may need to use state manager, hooks for advance use case. 

I will share to you about advance modal using state manager, or context in react for more easy to manage in big scale project. 

You can explore this tutorial by adding any modification including dynamic content by passed the props or other.


If you're have any suggestion or any argument about this article please comment below. If this article help you please like this article and follow me. 

Opps, i almost forget. You can see the detail of this project in the Github Repository [https://github.com/nyomansunima/modal-in-react](https://github.com/nyomansunima/modal-in-react). Also follow my twitter [@nyomansunima](https://twitter.com/nyomansunima)


Hope you're understand and Start endeavor.