@majoyal/react-modal-image
v2.2.2
Published
Lightweight Lightbox React Component
Downloads
13
Maintainers
Readme
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 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. |
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 |