Step-by-step tutorial on how to create a React Modal.

Introduction.

React Modal is a widely used UI component in web development. It allows you to display content in an overlay on top of your website, which can be used for various purposes such as communicating alerts, notifications, or forms. In this step-by-step guide, we will walk through the process of creating a React modal.

Web experience, a lot of times depends on the kind of user interfaces available on websites, a good user interface will print a delightful experience in the minds of web visitors, giving users an exciting web experience is the work of modals in React apps.

Modals are popups that deactivate all other contents of a webpage and allow users to take action on important information on a website, these popups can be in the form of notifications, prompt messages, or even forms that collect data from users.

Modals give visibility to webpages and dialogues on a webpage, and they make sure that users are aware of real-time page updates.

Modals also give flexibility to websites by preserving the original page while displaying new features.

They also make websites simple by keeping all contents of a webpage on a single page making sure that users are not disconnected from the original page contents.

Summarily, Modals are used to grab the attention of users and make them focus on the new information available.

What is React?

React is a declarative, effective, and adaptable JavaScript user interface library. It allows you to create complex user interfaces out of discrete, small chunks of code known as "components." There are several types of components in React. In this tutorial, you will learn how to create Modals that you can use in your React Apps and customize them to your specific needs, for this tutorial, we will build a newsletter signup form Modal.

Setup your React App.

Setup your react app in the following steps:

1. Create a new React project using npx create-react-app react-modal.
2. Restructure your React App to a blank web page where you can add your custom codes and start your development server using npm start. Confirm if your app is running successfully by checking your local server on localhost://3000.

Once your app is running, let us start building, builders are winners.

We need to add a bit of styling to our project to be appealing to the readers, find the CSS code in the code block below, you can also add other beauties to it, you know?

.modal {
    position: fixed;
    width: 300px;
    height: 350px;
    background: rgb(122, 6, 6);
    color: white;
    z-index: 10;
    align-items: center !important;
    border-radius: 16px;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
  }

  .signupBtn {
    margin: 20px 10px;
    cursor: pointer;
    font-weight: 500;
    padding: 13px 25px;
    border-radius: 15px;
    font-size: 0.8rem;
    border: none;
    color: white;
    background: #910909;
    transition: all 0.25s ease;
    z-index: -1;
    position: fixed;
    justify-items: center !important;
  }

  .subBtn {
    margin: 20px 10px;
    cursor: pointer;
    font-weight: 500;
    padding: 13px 25px;
    border-radius: 15px;
    font-size: 0.8rem;
    border: none;
    color: white;
    background: #910909;
    transition: all 0.25s ease;
    position: relative;
    left: 80px;
   content: initial

  }

  .signupBtn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px -10px rgba(173, 7, 7, 0.6);
  }

  .modalHeader {
    height: 50px;
    background: rgb(104, 5, 5);
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .heading {
    margin: 0;
    padding: 5px;
    color: #bdfa5c;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
  }
  .content {
    margin: 0;
    padding: 5px;
    color: #bdfa5c;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
  }

Let's get to real work!

To toggle the Signup modal, we need a signup button that users will click on and in turn display our form, create a button with the code snippet below.

<button>Signup</button>, to make the button more appealing, style it as you wish.

Create a Modal component that will render the signup form and import the Modal into App.js, this modal is a JSX file that will be rendered dynamically.

Since toggle buttons function by executing changes in state, create a useState hook to manage the state of your signup form Modal whenever the signup button is clicked, using the following code snippet, import useState from React at the beginning of your code using:

import {useState} from React;

Go ahead and define the state function for the toggle button using the snippet below and set it to false by default.

The initial state will make our Sign up Modal form hidden by default.

const [openModal, setOpenModal] = useState(false);

Next, pass an open prop to the Modal component, and set it to the openModal state, recall that we have set the initial state of our Modal component to false, so we’re simply importing the false state to the Modal here.

open={openModal}

Go to the Modal.js file and pass the open prop into the Modal functional component.

The next thing to do is to define the logic that opens and closes the Modal, use the following code snippet to define this logic.

if(!open) return null;

This simply means that if the Modal is not open, do not return anything on the screen.

You will notice that the signup modal is now hidden if the code is rightly implemented.

We want to make the signup button functional and display the form Modal once a click event is applied to it, to do this add the following code snippet to the signup button in App.js.

onClick={() => setOpenModal(true)}.

Recall that the form Modal state is set to false initially, once we click on the signup button, the state will change to true with the code snippet above. Go ahead and test the functionality of the signup button.

Our Modal form is now working, we can go ahead to add other functionalities.

If you notice, we are unable to close our modal yet, even after submitting the form, to close the modal, we need to add a callback function that will return the state of the Modal component to false, add a click event to the Submit button, this will close the form modal once clicked.

onClick={onClose}, pass the onClose to the Modal functional component.

Add the onClose prop to the Modal Component in App.js and pass the openModal state as false to it, this will activate the functionality anytime there is a click event on the submit button.

onClose={()=> setOpenModal(false)}

Try all other functionalities, you should be able to use this Modal in your projects.

You have successfully created a React modal. With this step-by-step guide, you can now customize and style your modal to fit the needs of your web application.

Find a demo of the tutorial guide below.

Conclusion.

In this tutorial, we have established what Modals are and how they can be used in React Apps.

Continuous learning and experimenting with Modals will assist you in creating engaging and user-friendly React Web Applications. Diving deeper into Modal development in your projects will unlock a lot of ways to improve the user experience on your websites.

The link to Github repo for the tutorial is below.

https://github.com/AbuTuraab/react-modal

Thanks for reading, I will be grateful to know if you find this tutorial helpful.