How to Create Simple Modal in React

Creating modal window in React is easier than you might think.

Photo by Caitlin Oriel on Unsplash

You probably use some popular library to create a modal window in your React app. From this article you will learn how to create a simple modal in React yourself.

Our modal will be able to:

• Show its content in the middle of the screen.
• Close if you click it or press Esc.

We create an overlay for our modal to show it fullscreen, and then add styles to centre it’s content.

We can make code for our Modal very simple:

Then we add it to our App and add event listeners for Esc key:

You can try this simple modal in the codepen below.