Using Lightboxes to Create Stunning Image Galleries in React

William Le

Learn how to use fslightbox-react to create sleek image galleries for your React app. We’ll also compare other lightbox options so that you can make the best decision for your needs

Finding a good lightbox for React isn’t easy because many times it’ll lack obviously necessary features like swiping/keyboard navigation, or it might be unwieldy because it requires you to hardcode CSS stylesheets <links> in your HTML.

Well, I’ve got good news! A brand new React lightbox called fslightbox-react was recently released that seems to strike the balance between offering the right scope of features, while also feeling like a very modular/lightweight solution.

Try swiping to navigate photos, or using your ⬅️ and ➡️ arrow keys on your keyboard:

import React, { Component } from "react";
import Lightbox from 'fslightbox-react'; 

export default class ImageLightbox extends Component {
  state = {
    isVisible: true,
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ isVisible: !this.state.isVisible })
          }}
        >
          toggle lightbox
        </button>
        <Lightbox
          toggler={this.state.isVisible}
          urls={[
            'image1.jpg',
            'image2.jpg',
            'image3.jpg',
            'image4.jpg',
            'image5.jpg',
            'image6.jpg'
          ]}
        />
      </div>
    );
  }
}

Photos credits belong to the spectacular Unsplash.com community of photographers 💫

fslightbox-react comes with awesome features out-of-the-box:

  • Touch-ready, and has keyboard shortcuts
  • Several ways to exit lightbox by: clicking on the overlay, pressing the ESC key, or clicking the X icon
  • Allows for video files, and YouTube videos
  • Doesn’t require any external CSS stylesheets

Overall I appreciate the thoughtfulness that went into executing a small set of features really well, and providing a minimal UI that won’t clash with your app’s branding/marketing.

In-Depth Usage

Creating a grid of photos that opens in lightbox is easy, and doesn’t require much more code:

import React, { Component } from "react";
import Lightbox from 'fslightbox-react'; 

class GridGallery extends Component {
  state = {
    isVisible: false,
    slide: 0,
  }
  showSlide = (slide) => {
    this.setState({
      isVisible: !this.state.isVisible,
      slide: slide
    });
  }
  render() {
    return (
      <div>

        <Lightbox
          toggler={this.state.isVisible}
          slide={this.state.slide}
          urls={[
            'image1.jpg',
            'image2.jpg',
            'image3.jpg',
            'image4.jpg',
            'image5.jpg',
            'image6.jpg'
          ]}
        />

        <img
          onClick={() => this.showSlide(1)}
          src="image1.jpg"
        />
        <img
          onClick={() => this.showSlide(2)}
          src="image2.jpg"
        />
        <img
          onClick={() => this.showSlide(3)}
          src="image3.jpg"
        />
        <img
          onClick={() => this.showSlide(4)}
          src="image4.jpg"
        />
        <img
          onClick={() => this.showSlide(5)}
          src="image5.jpg"
        />
        <img
          onClick={() => this.showSlide(6)}
          src="image6.jpg"
        />
        
      </div>
    );
  }
}

Comparing Alternatives

fslightbox-react isn’t perfect so it’s recommended to compare several libraries on npm to ensure your choice will provide the features you’ll need.

Comparison of the most popular libraries on npmjs.com:

Package⌨️ Nav👇 Swiping📦 CSS🌄 Captions🔍 Zoom🌩 Download
fslightbox-react@1.2.0🚫🚫🚫
react-image-lightbox@5.1.0😒🚫🚫
react-modal-image@2.3.4🚫🚫
react-lightbox-component@1.2.1🚫🚫

If you need a simple & elegant lightbox to show off your images give fslightbox-react a try!

View documentation for fslightbox-react on their website 🐟🐠

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#