How to Add A React Lightbox to Your Project or Website (in Just 3 Steps)

Want to add a React lightbox to your project? You've come to the right place!

In this guide, we're going to be taking a look at how to add a lightbox to your React project in just 3 simple steps.

This is great if you want to include a lightbox in your:

• eCommerce store
• blog
• portfolio or personal website
• and so much more

Let's get started!

Demo

Here's a demo of what we'll be creating:

Pretty cool, right? And what's even better is that it can be set-up in a matter of minutes.

Step 1: Install Lightbox.js

Firstly, install Lightbox.js, which is a fully responsive React lightbox that has a great set of features, perfect for desktop and mobile devices.

Features include:

• Image zooming
• Mobile zoom
• Thumbnails
• Slideshow
• Theming and customization options

We'll be taking a look at these features below also, just to show some of the extended functionality provided with the lightbox.

To install the lightbox, simply open your terminal of choice and run:

npm install lightbox.js-react --save

Once the package is installed, it's time to get started with implementing it!

Step 2: Initialization

Open the file of the React component where you wish to integrate the lightbox and add the following imports:

import React, {useEffect} from "react";
import 'lightbox.js-react/dist/index.css'
import {SlideshowLightbox, initLightboxJS} from 'lightbox.js-react'

Licensing:

Lightbox.js is free if you're using it for an open source project. Otherwise, a commercial license can be purchased, which can be done so on the pricing page here.

Readers of this tutorial can also avail of an exclusive 35% off discount, using the code OFFER35.

• Open source project: Contact Lightbox.js to get a free license key through the contact form here.
• Commercial project: Purchase a commercial license on the official website here. Use the exclusive code OFFER35 to get a discount too!

If you're an individual developer, the Individual commercial license is recommended, while a Team & Company plan can be purchased for teams or companies wishing to use the library.

Once you have your license key, pass it to the initLightboxJS function you imported previously, along with the name of the plan your license uses. The two plan types are team and individual.

useEffect(() => {
  initLightboxJS("Insert License key", "Insert plan type here");
});

Step 3: Adding the Lightbox

Next, wrap the images you wish to include in a SlideshowLightbox component, as shown in the example snippet below.

Add the following to your JSX:

<SlideshowLightbox theme="day" showThumbnails={true} className="images" roundedImages={true}> 
    <img alt='Mechanical keyboard with white keycaps.' src={"https://source.unsplash.com/sQZ_A17cufs/549x711"} />
    <img alt="Mechanical keyboard with white, pastel green and red keycaps."  src={"https://source.unsplash.com/rsAeSMzOX9Y/768x512"} />  
    <img alt="Mechanical keyboard with white, pastel pink, yellow and red keycaps."  src={"https://source.unsplash.com/Z6SXt1v5tP8/768x512"} />
    <img alt="Mechanical keyboard with white keycaps." src={"https://source.unsplash.com/2WcghjtPodU/549x711"} />       

</SlideshowLightbox>

While no extra CSS is required to style the images in the lightbox itself, if you'd like to style the initial images displayed outside (the images which are clicked to display the lightbox), you could use flexbox so that the images are positioned in a row. This step is optional however, as it may depend on your use case and how you'd like the images to be displayed and so forth.

Add the following CSS:

.images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.images img {
    flex-basis: 33%;
    padding: 2px;
}

The Result

If you've followed the steps above, you should now have a lightbox that displays whenever any of the images are clicked! Here's a demo:

Full Example

import React, {useEffect} from "react";
import { SlideshowLightbox, initLightboxJS } from "lightbox.js-react";
import "lightbox.js-react/dist/index.css";

export function Demo() {
  useEffect(() => {
    initLightboxJS("Insert License key", "Insert plan type here");
  });

  return (
    <SlideshowLightbox
      theme="day"
      showThumbnails={true}
      className="images"
      roundedImages={true}
    >
      <img
        alt="Mechanical keyboard with white keycaps."
        src={"https://source.unsplash.com/sQZ_A17cufs/549x711"}
      />
      <img
        alt="Mechanical keyboard with white, pastel green and red keycaps."
        src={"https://source.unsplash.com/rsAeSMzOX9Y/768x512"}
      />
      <img
        alt="Mechanical keyboard with white, pastel pink, yellow and red keycaps."
        src={"https://source.unsplash.com/Z6SXt1v5tP8/768x512"}
      />
      <img
        alt="Mechanical keyboard with white keycaps."
        src={"https://source.unsplash.com/2WcghjtPodU/549x711"}
      />
    </SlideshowLightbox>
  );
}

Bonus Step: Theming & Customization

This step is optional, but if you'd like to update the lightbox's theme, this is possible through passing a value to the theme prop. The three themes available are:

• day: A white background with gray icons
• night: A dark background with white icons
• lightbox: A semi-transparent gray background with gray icons

For further customization, you can also adjust the background color of the lightbox by passing a color to the backgroundColor prop as an RGB, RGBA, HEX code, or CSS color name value:

<SlideshowLightbox backgroundColor="gray">
...
</SlideshowLightbox>

Here's an example with the lightbox theme:

Exploring More Demos

If you'd like to see more examples and demos of Lightbox.js in action, be sure to take a look at our demos page, which lists lots of example demos to get you started.

Online café shop

Photo showcase

Conclusion

Thanks very much for reading this tutorial, I hope you've found it useful! If you have any questions or comments, be sure to let me know below!

If you have any issues with setting up the lightbox or need any other assistance, don't hesitate to let me know or use the contact form provided on the official website, where all support queries are answered.

Thanks again, and wishing you the very best!