Package Exports
- react-modal-image
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-modal-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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 |