Modular Modals in React

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

Roi Livne
Roi Livne
Feb 20 · 3 min read
Photo by Simon Goetz

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.

Modular React Modals

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!

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Roi Livne

Written by

Roi Livne

Gamer, Web Developer, Meme advocate and beginner artista. See more: https://www.roilivne.dev/

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store