react-modal-image
A lightweight React component providing modal image Lightbox.
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!"
/>;| 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. |
hideDownload |
boolean |
Optional. Set to true to hide download-button from the Lightbox. |
hideZoom |
boolean |
Optional. Set to true to hide zoom-button from the Lightbox. |
showRotate |
boolean |
Optional. Set to true to show rotate-button within the Lightbox. |
imageBackgroundColor |
String |
Optional. Background color of the image shown in Lightbox. Defaults to black. Handy for transparent images. |
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}
/>
);
}| Prop | Type | Description |
|---|---|---|
onClose |
function |
Will be invoked when the Lightbox requests to be closed |