How to easily add a lightbox in any React project

A simple but functional lightbox for React

GitHub | Official Website | CodeSandbox Demo | PRO version demo

A brief introduction 🧐

It all started when I was working on one of my projects with React. The client had a blog site and wanted to add a lightbox to the images in the blog posts. The problem was that the data was fetched from the backend and I had no control over the content of each post.

I looked online for some lightboxes for React, but the way they worked was that I had to declare the images beforehand either in an array, an object, etc… but what if you do not know what content you are getting and you just want to add a lightbox to the images in the content?

Simple React Lightbox gives you the ability to add lightbox functionality to a set of images, whether you define it yourself or get it from an external source (API, backend, etc…). Just use the included component to wrap your app with it, define your options (if you want) and then use the "" component by wrapping it around the content where you have or expect your images!

Packed with features 📦

Since the first version came out, I added tons of new and useful features. Also the PRO version adds even more features. Some of the features are:

• Image validation (if you have a broken image, it will be ignored by the lightbox).
• Audio e Video support (PRO ONLY)
• Exclude elements with a simple custom HTML attribute (PRO ONLY)
• Custom icons and custom captions (PRO ONLY)
• Support for NextJS and Gatsby and support for Gatsby images.
• Observable to check if more images are loaded (for example from an API).
• Translations (i18n compatible) to translate the icons using your preferred language (PRO ONLY)
• Callbacks to get the status of the lightbox including counting how many images it holds, which slide is selected and which slides comes before and after the current one. *Hooks! One for opening the lightbox (from the first image or passing and index) and one for closing the lightbox.

---

Install

// With npm
npm install --save simple-react-lightbox
// or with Yarn
yarn add simple-react-lightbox

---

Usage

I have provided a demo on CodeSandbox for you to play with or you can just follow the instructions below. Alternatively, you can try the full demo with the PRO version on the official website.

Instructions

First of all you need to "wrap" your React app with the main component so that it can create the context. The example below will allow you to use the Simple React Lightbox wherever you need it in your app:

import React from "react";
import MyComponent from "./components/MyComponent";
import SimpleReactLightbox from "simple-react-lightbox"; 
// Import Simple React Lightbox
function App() {
  return (
    <div className="App">
      <SimpleReactLightbox>
        <MyComponent /> // Your App logic (Components, Router etc...)
      </SimpleReactLightbox>
    </div>
  );
}
export default App;
```

`
Next you want to import and use the SRLWrapper component wherever you expect the content with the images on which you want to add the lightbox functionality. Please note the {} as this is a named export. The caption for the images will be generated from the image "alt" attribute!

`

```
import React from "react";
import { SRLWrapper } from "simple-react-lightbox"; // Import SRLWrapper
function MyComponent() {
  return (
      <SRLWrapper>
        // This will be your content with the images. It can be anything. Content defined by yourself, content fetched from an API, data from a graphQL query... anything :)
      </SRLWrapper>
  );
}
export default MyComponent;
```

`
That's it 🥳 As we are not passing any options you should have a working lightbox with the default options like the image below:
![The lightbox with default options](https://simple-react-lightbox.dev/docs/SRL_Example1_Git.jpeg)


#### Options
I know what you are thinking.

>"That's cool and all but the style of the lightbox doesn't match the one of my project. That's ok though. I will use your classes and override everything with my custom styles…"

⚠️ WAIT! ⚠️ Despite the fact that I have made sure to define class names for each part of the lightbox, I have provided all the options that you need to customise the lightbox so that you don't have to add any additional logic. You can customise everything! Check how to add options on the options on the GitHub repo.
The lightbox with custom options
![The lightbox with custom options](https://simple-react-lightbox.dev/docs/SRL_Example2_Git.jpeg)

---

That's it! I hope you enjoy Simple React Lightbox and keep following the project as I am planning to add more features in the future.