@astrocoders/react-modal-image v2.1.7

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!"
/>

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