How to Create Popup Modal In React

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/

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.

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.

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

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.

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

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

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.

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

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.

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.

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.

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

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. Also follow my twitter @nyomansunima

Hope you're understand and Start endeavor.