react-modal-image

A lightweight React component providing modal image Lightbox.

DEMO

Features

• Only 3 kB when gzipped.
• Zero dependencies.
• Includes builds for CommonJS and ES modules.
• For React 16.x, 17.x and 18.x.
• Esc, Enter & click outside the image close the lightbox
• User can zoom & move the image or download the highest quality one
• Download and Zoom -buttons can be hidden.
• Image alt shown as title of lightbox
• Background color of transparent images can be overridden.

You need to bring your own Set and fetch polyfills if you use old Internet Explorers.

Simple API

import ModalImage from "react-modal-image";

<ModalImage
  small={urlToTinyImageFile}
  large={urlToHugeImageFile}
  alt="Hello World!"
/>;

Lightbox-only API for advanced usage

You can also choose to import only the Lightbox.

To use the Lightbox only, you'll need to handle the open state by yourself:

import { Lightbox } from "react-modal-image";

// ...

const closeLightbox = () => {
  this.state.open = true;
};

// ...

{
  this.state.open && (
    <Lightbox
      medium={urlToLargeImageFile}
      large={urlToHugeImageFile}
      alt="Hello World!"
      onClose={this.closeLightbox}
    />
  );
}