React Image Lightbox

A flexible lightbox component for displaying images in a React project.

DEMO

Features

• Keyboard shortcuts (with rate limiting)
• Image Zoom
• Flexible rendering using src values assigned on the fly
• Image preloading for smoother viewing
• Mobile friendly, with pinch to zoom and swipe (Thanks, @webcarrot!)

Example

import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app

const images = [
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500',
];

export default class LightboxExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
    };
  }

  render() {
    const { photoIndex, isOpen } = this.state;

    return (
      <div>
        <button type="button"> this.setState({ isOpen: true })}&gt;
          Open Lightbox
        </button>

        {isOpen &amp;&amp; (
           this.setState({ isOpen: false })}
            onMovePrevRequest={() =&gt;
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length,
              })
            }
            onMoveNextRequest={() =&gt;
              this.setState({
                photoIndex: (photoIndex + 1) % images.length,
              })
            }
          /&gt;
        )}
      </div>
    );
  }
}

Play with the code on the example on CodeSandbox

Options

Browser Compatibility

Contributing

After cloning the repository and running npm install inside, you can use the following commands to develop and build the project.

# Starts a webpack dev server that hosts a demo page with the lightbox.
# It uses react-hot-loader so changes are reflected on save.
npm start

# Lints the code with eslint and my custom rules.
yarn run lint

# Lints and builds the code, placing the result in the dist directory.
# This build is necessary to reflect changes if you're
#  `npm link`-ed to this repository from another local project.
yarn run build

Pull requests are welcome!

License

MIT