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

Write a cleaner CSS with :where() and :is() pseudo-classes

Photo by Joshua Aragon

If you haven’t heard about the :where() and :is() pseudo-classes,
don’t feel bad. They were only recently introduced to most browsers.
But they just might be your new favorite thing in vanilla CSS!

In this article, we will learn how to use our new handy tools in writing CSS.


Think about when you want to apply the same styling to multiple elements in your HTML. You’d probably end up with something that looks like this:

.main h1,
.main h2,
.main .heading, {
line-height: 1.2;
.nav li,
.nav p {
padding: 5px 10px;

With :is() we can write our…

Roi Livne

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

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