Documentation

Install

Simple React Lightbox can be installed using either npm or yarn.

1npm install --save simple-react-lightbox
1yarn add simple-react-lightbox

First step

Before wrapping your images, Simple React Lightbox has a main component which holds the context and must wrap your app. If you are using Gatsby you can wrap it in your "gatsby-browser" file and/or "gatsby-ssr" file.

The example below shows how to wrap your app created with Create React App.

1
2import React from "react";
3import ReactDOM from "react-dom";
4import App from "./App";
5import SimpleReactLightbox from 'simple-react-lightbox'
6// USE THE IMPORT BELOW INSTEAD IF YOU ARE USING THE PRO VERSION
7// import SimpleReactLightbox from 'simple-react-lightbox-pro'
8
9ReactDOM.render(
10  <React.StrictMode>
11    <SimpleReactLightbox>
12      <App />
13    </SimpleReactLightbox>
14  </React.StrictMode>,
15  document.getElementById("root")
16);

The example below shows how to wrap your Gatsby app as mentioned above.

1
2import React from 'react'
3import SimpleReactLightbox from 'simple-react-lightbox'
4// USE THE IMPORT BELOW INSTEAD IF YOU ARE USING THE PRO VERSION
5// import SimpleReactLightbox from 'simple-react-lightbox-pro'
6
7// eslint-disable-next-line react/prop-types
8export const wrapRootElement = ({ element }) => (
9  <SimpleReactLightbox>{element}</SimpleReactLightbox>
10)
11

Multiple lightbox on the same page

If you need multiple instances of the lightbox on a single page you should wrap each with its own <SimpleReactLightbox> component.

1
2import SimpleReactLightbox, { SRLWrapper } from "simple-react-lightbox";
3// USE THE IMPORT BELOW INSTEAD IF YOU ARE USING THE PRO VERSION
4// import SimpleReactLightbox, { SRLWrapper } from 'simple-react-lightbox-pro'
5
6function MyComponent() {
7  return (
8    <>
9
10    // First Gallery
11    <SimpleReactLightbox>
12      <SRLWrapper>
13        <a href="link/to/the/full/width/image.jpg">
14          <img src="src/for/the/thumbnail/image.jpg" alt="Umbrella" />
15        </a>
16        <a href="link/to/the/full/width/image_two.jpg">
17          <img src="src/for/the/thumbnail/image_two.jpg" alt="Blue sky" />
18        </a>
19      </SRLWrapper>
20    </SimpleReactLightbox>
21
22    // Second Gallery
23    <SimpleReactLightbox>
24      <SRLWrapper>
25        <a href="link/to/the/full/width/image_three.jpg">
26          <img src="src/for/the/thumbnail/image_three.jpg" alt="City" />
27        </a>
28        <a href="link/to/the/full/width/image_four.jpg">
29          <img src="src/for/the/thumbnail/image_four.jpg" alt="Forest" />
30        </a>
31      </SRLWrapper>
32    </SimpleReactLightbox>
33
34    </>
35  );
36}
37
38export default MyComponent;
39
Basic usage