Nerd For Tech
Published in

Nerd For Tech

Modular Modals in React

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

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!

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/.

Recommended from Medium

NoC week4— Explorations

In JavaScript Console Other Than Console.log()

A Native Deno Webserver

Webpacker in Rails 6

Node.js is terrible for data processing pipelines

How To Install Python For Node

Game Prototyping using p5.js

Integrating FCM in React Native and processing FCM messages even in background.

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
Roi Livne

Roi Livne

Full Stack Developer. https://www.roilivne.dev/

More from Medium

Using TypeScript With React: A Step by Step Guide

How To Make Parallel API calls in React Applications — Typescript Version

Learn React by Building an Expense Tracker App: Adding Chart

React vs. Web Components

Two shaking hands with overlay showing React logo on the left and Web Components logo on the right.