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 15.x and 16.x.
• Esc, Enter & click outside the image close the lightbox
• User can zoom & move the image or download the highest quality one
• Image alt shown as title of lightbox

You need to bring your own Set polyfill if you use old Internet Explorers.

Simple API

import ModalImage from 'react-modal-image'

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

| Prop | Type | Description | | ------------------- | --------- | ----------------------------------------------------------------------------------- | | className | String | Optional. class for the small preview image. | | alt | String | Optional. alt for the small image and the heading text in Lightbox. | | small | URL | src for the small preview image. | | smallSrcSet | String | Optional. srcSet for the small preview image. | | medium | URL | Optional if large is defined. Image shown when zoomed out in Lightbox. | | large | URL | Optional if medium is defined. Image shown when zoomed in Lightbox. Downloadable. | | hasDownloadButton | Boolean | Optional. Show download button in LightBox if set true |

Lightbox-only API

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} />
  )
}

| Prop | Type | Description | | --------- | ---------- | ------------------------------------------------------- | | onClose | function | Will be invoked when the Lightbox requests to be closed |