Modular Modals in React

A guide on how to create multi-purpose, modular & scalable React Modals

Modals are one of the most used graphical control elements in modern UI designs, thanks to their ability to avoid disrupting the user’s workflow in the main window.

Unfortunately, sometimes, behind a clean modal, lies some really messy code.

In this article, we will cover how to create a multi-purpose modal, keep it clean, modular, and scalable for your every needs using React components.

Starting out

For this guide, you can use any project you already have and want to create your modal in, because we’re going to focus primarily on the modal components.
However, feel free to use this Github for the code itself, or just follow along as we create it together.

Go ahead and open a new project and run the react app template:

npx create-react-app <path>

Now let's first edit our App.js file with some buttons to test our Modal:

Next, in your src folder, create a components folder.
In it, create a Modal.js file and a modals folder.

Note that the *Modal.js* is not inside the *modals* folder

Opening the Modal

Continuing with our App.js file, we’ll create a state, a context, and an update function to control our Modals from anywhere in our application.
We will also remove the default export on App().
(You will have to change your import on index.js to import { App } from ‘./App’ for your app to continue working)

Now our buttons are configured to update the modal parameters so our Modal.js component will open the correct Modal.

The Modals

For testing, we’ll create some very basic components in our modals folder: LoginModal.js, SignupModal.js, BuyModal.js, CreditsModal.js.
Each one will just return the name of it, like so:

Modal.js

Now, all we’re left to do is finish our Modal.js file.

To make this Modal modular and scalable while keeping it as clean as possible, we separated each instance of our Modal into a different file.
Thus, allowing our Modal.js file to act as a controller for the different Modals.

We imported our different modals and context and also added a function to close the modal if the user clicks anywhere outside of it.

If isOpen is true, we return the appropriate Modal. If not, we return nothing.

Let’s add some basic CSS to our App.css so our Modal will show over the webpage:

…and Voilà!

A modular, scalable, and clean Modal component to control and operate all of your Modal needs in just one parent component.

Now, if you want to add any other Modal type, you can simply import it and add another conditional to your Modal.js file for seamless integration.

Conclusion

When you’re working on a project under time pressure, it’s not always easy creating modular or scalable components right from the start.

By investing time, and adopting these methods or ways of thinking to other parts of your code you could achieve more clean and maintainable code.

The code is also available on this Github repository.

If you enjoyed this article and found it helpful, don’t forget to clap :)
And of course, if you have any feedback, please write it in the comments!