# react-modal-image

> Lightweight Lightbox React Component

Latest version **2.6.0** (published 2022-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-modal-image
pnpm add react-modal-image
yarn add react-modal-image
bun add react-modal-image
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.6.0 |
| Published | 2022-09-08 |
| First published | 2018-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-modal-image) |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 77 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 204 |
| Author | Ari Autio |
| Maintainers | aautio |
| Keywords | react-component, lightbox, modal, image, react |

## Links

- npm: https://www.npmjs.com/package/react-modal-image
- Repository: https://github.com/aautio/react-modal-image
- Homepage: https://github.com/aautio/react-modal-image#readme
- Issues: https://github.com/aautio/react-modal-image/issues
- npm.io page: https://npm.io/package/react-modal-image

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.6.0 (latest) — 2022-09-08
- 2.5.0 — 2019-10-02
- 2.4.0 — 2019-06-25
- 2.3.2 — 2019-02-03
- 2.3.1 — 2018-11-17
- 2.3.0 — 2018-10-26
- 2.2.0 — 2018-09-09
- 2.1.4 — 2018-01-29
- 2.1.3 — 2018-01-27
- 2.1.2 — 2018-01-27
- 2.1.1 — 2018-01-26
- 2.0.2 — 2018-01-26
- 2.0.1 — 2018-01-25
- 2.0.0 — 2018-01-24
- 1.0.7 — 2018-01-24
- … 5 more at https://npm.io/package/react-modal-image/versions

## 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";

<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:

```js
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 |

[npm-badge]: https://img.shields.io/npm/v/react-modal-image.svg
[npm]: https://www.npmjs.org/package/react-modal-image

---
_Source: https://npm.io/package/react-modal-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._