# react-modal-images

> A lightweight React component providing modal image.

Latest version **0.1.0** (published 2022-11-02) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-11-02 |
| First published | 2022-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Mesut Çağa |
| Maintainers | me5ut |
| Keywords | react-component, react-modal-images, react, modal, image |

## Links

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

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

- 0.1.0 (latest) — 2022-11-02
- 0.0.40 — 2022-11-02
- 0.0.39 — 2022-10-31
- 0.0.38 — 2022-10-31
- 0.0.37 — 2022-10-31
- 0.0.36 — 2022-10-31
- 0.0.35 — 2022-10-31
- 0.0.34 — 2022-10-31
- 0.0.33 — 2022-10-31
- 0.0.32 — 2022-10-31
- 0.0.31 — 2022-10-31
- 0.0.30 — 2022-10-31
- 0.0.29 — 2022-10-30
- 0.0.28 — 2022-10-30
- 0.0.27 — 2022-10-30
- … 23 more at https://npm.io/package/react-modal-images/versions

## README

### React Modal Images

A lightweight React component providing modal image.

[Live DEMO](https://codesandbox.io/s/react-modal-images-example-gftzf)

## Features

-   Only 2.3 kB when gzipped.
-   Zero dependencies.
-   Includes builds for CommonJS and ES modules.
-   For React 16.x, 17.x and 18.x.
-   Download and Zoom Buttons can be hidden.
-   Image alt shown as title of Modal Image.
-   Background color of transparent images can be overridden.

## Usage

```jsx
import React from 'react';
import { RModalImages } from 'react-modal-images';

interface IAppProps {}

export const App: React.FC<IAppProps> = () => {
    return (
        <div className="App">
            <RModalImages
                small={'https://dummyimage.com/420x200/000/aaa'}
                medium={'https://dummyimage.com/720x400/000/aaa'}
                large={'https://dummyimage.com/1020x800/000/aaa'}
                alt={'An alternate text for this image'}
            />
        </div>
    );
};
```

| Prop                   | Type      | Description                                                                       |
| ---------------------- | --------- | --------------------------------------------------------------------------------- |
| `className`            | `string`  | Optional. Class name for the small preview image.                                 |
| `alt`                  | `string`  | Optional. An alternate text for the small image.                                  |
| `small`                | `string`  | Required. Src for the small preview image.                                        |
| `smallSrcSet`          | `string`  | Optional. SrcSet for the small preview image.                                     |
| `medium`               | `string`  | Optional. If `large` is defined. Image shown when zoomed out in modal.            |
| `large`                | `string`  | Optional. If `medium` is defined. Image shown when zoomed in modal. Downloadable. |
| `hideDownloadButton`   | `boolean` | Optional. Set to `true` to hide download-button from the modal.                   |
| `hideZoomButton`       | `boolean` | Optional. Set to `true` to hide zoom-button from the modal.                       |
| `hideRotateButton`     | `boolean` | Optional. Set to `true` to hide rotate-button within the modal.                   |
| `imageBackgroundColor` | `string`  | Optional. Background color of the image shown in modal. Defaults to black.        |

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