Creating a Simple Lightbox From Scratch in React

Here’s what we will be building:

Before we can get to work on the lightbox itself, we need to store our image data and display our images on the page.

I chose to store my images in an array for two primary reasons: Having the images in an array makes the data easy to navigate when moving back or forward in the lightbox, and it also makes it easy to add or replace images without impacting any of the lightbox logic.

Now that we have our images in an array, we can map over it to display them. Feel free to make a separate image card component for each.

Now we will define the two pieces of state that our lightbox will depend on:

Next, when we click an image, we want the lightbox to be visible and for that image to be displayed in it. Let’s define a function that does that:

And add it onClick when we map over our image array:

Now when you click on an image, you should see it appear below your image gallery, and it should update accordingly when you click on another one. It doesn’t yet appear on top of the other page content like a modal would, so let’s fix that in our CSS file:

Now that we’ve positioned our lightbox on top of our other content, it’d be nice to be able to close it by clicking anywhere on screen. Let’s create a function that does that:

And add it as an onClick event to the entire lightbox:

Now we’re able to easily close the lightbox and select another image.

Next, we want to be able to click through all of our images without exiting the lightbox. Let’s first add some buttons inside our lightbox:

Let’s start by showing the next image when clicking the button with the right arrow. We’ll write a function called showNext:

The first thing we’ll do is invoke stopPropagation(). Why? Since we already have an event attached to the entire lightbox (hideLightBox), we want to ensure that our button click events remain separate from our lightbox div event. stopPropagation() will prevent any bubbling up or capturing down of the events, which could create unintended consequences. If you’re curious, try running these functions without using stopPropagation().

Next, we’ll define a variable, currentIndex which stores the index of the current image in the lightbox.

Now that we have the index, we can pretty easily access the next image in our array. We can then update our ImageToShow state to that image:

Let’s add this function onClick:

Great! This should be working. There’s one more thing though: We want to make sure the lightbox closes when we run out of images, so we’ll add a conditional to address that. See the completed function below:

I’ll be using the same logic to show the previous image, see the code below:

Don’t forget to add this function to the left arrow button:

And that’s our simple custom React lightbox. Of course, there’s way more that can be implemented, refactored or styled, but hopefully this is a good starting point.

Related posts:

I work with a variety of marketing teams on a daily basis. And I have experience hiring, training and managing every part of a marketing team. If I’ve learned one thing throughout all of that…

The other day I sat down and drew out a map. Old school. I wrote my plans down and made them plain. I built my boat and raised the sail. Beyond the waves I looked and although I couldn’t see anything…

At Lovegasm we believe that everyone deserves a happy and healthy sex life. You shouldn’t have to compromise when it comes to how to discover and shop for the products you want to use. So, we are on…