https://github.com/aautio/react-modal-image
A tiny React component providing modal image Lightbox.
https://github.com/aautio/react-modal-image
image lightbox modal react
Last synced: over 1 year ago
JSON representation
A tiny React component providing modal image Lightbox.
- Host: GitHub
- URL: https://github.com/aautio/react-modal-image
- Owner: aautio
- License: mit
- Created: 2018-01-21T21:06:19.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-01-30T15:24:34.000Z (over 2 years ago)
- Last Synced: 2024-10-29T22:23:35.701Z (over 1 year ago)
- Topics: image, lightbox, modal, react
- Language: JavaScript
- Homepage: https://aautio.github.io/react-modal-image/
- Size: 2.4 MB
- Stars: 197
- Watchers: 3
- Forks: 64
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-modal-image
[![npm package][npm-badge]][npm]
A _lightweight_ React component providing modal image Lightbox.
[DEMO](https://aautio.github.io/react-modal-image/)
## 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
```js
import ModalImage from "react-modal-image";
;
```
| 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:
```js
import { Lightbox } from "react-modal-image";
// ...
const closeLightbox = () => {
this.state.open = true;
};
// ...
{
this.state.open && (
);
}
```
| Prop | Type | Description |
| --------- | ---------- | ------------------------------------------------------- |
| `onClose` | `function` | Will be invoked when the Lightbox requests to be closed |
[npm-badge]: https://img.shields.io/npm/v/react-modal-image.svg
[npm]: https://www.npmjs.org/package/react-modal-image