# react-viewer-mda

> react image viewer

Latest version **2.2.7** (published 2017-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-viewer-mda
pnpm add react-viewer-mda
yarn add react-viewer-mda
bun add react-viewer-mda
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.7 |
| Published | 2017-07-17 |
| First published | 2017-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | infeng & marcindabrowski |
| Maintainers | marcindabrowski |
| Keywords | react, image, viewer |

## Links

- npm: https://www.npmjs.com/package/react-viewer-mda
- Repository: https://github.com/marcindabrowski/react-viewer-mda
- Homepage: https://github.com/marcindabrowski/react-viewer-mda#readme
- Issues: https://github.com/marcindabrowski/react-viewer-mda/issues
- npm.io page: https://npm.io/package/react-viewer-mda

## Dependencies (3)

- [antd](https://npm.io/package/antd.md) ^2.8.3
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.1.1

## 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.2.7 (latest) — 2017-07-17
- 2.2.6 — 2017-07-17
- 2.2.5 — 2017-06-09

## README

# react-viewer-mda

[![NPM version][npm-image]][npm-url]
> react image viewer.

## Introduction

Because i can`t comfortable use [viewerjs](https://github.com/fengyuanchen/viewerjs) in react, so i create react-viewer to replace it.
This is a fork of [react-viewer](https://github.com/infeng/react-viewer).

**v2.2.5**
- Added `downloadable` option to image download.
- Hide navigation arrows when shows only one image.

**v2.2.6**
- Added afterChange property.
- Disable apropriate keyboard shortcuts when `zoomable` and `rotatable` is set to `false`.

## Installation

```bash
npm install react-viewer-mda --save
```

## Usage

```javascript
import * as React from 'react';
import Viewer from 'react-viewer-mda';
import 'react-viewer-mda/dist/index.css';

class App extends React.Component<any, any> {
  constructor() {
    super();

    this.state = {
      visible: false,
    };
  }

  render() {
    return (
      <div>
        <button onClick={() => { this.setState({ visible: !this.state.visible }); } }>show</button>
        <Viewer
        visible={this.state.visible}
        onClose={() => { this.setState({ visible: false }); } }
        images={[{src: '', alt: '', name: ''}]}
        />
      </div>
    );
  }
}
```

## Props

| props        | type                         | default | description                                                      | required |
|--------------|------------------------------|---------|------------------------------------------------------------------|----------|
| visible      | string                       |  false  | Viewer visible                                                   | true     |
| afterChange  | string                       |  noop   | Specify a function that will be called when active index changes | false    |
| onClose      | string                       |  -      | Specify a function that will be called when Visible close        | true     |
| images       | {src: string, alt: string}[] | []      | image source array                                               | true     |
| activeIndex  | number                       | 0       | active image index                                               | false    |
| zIndex       | number                       | 1000    | Viewer css z-index                                               | false    |
| container    | HTMLElement                  | null    | set parent node(inline mode)                                     | false    |
| drag         | boolean                      | true    | whether to drag image                                            | false    |
| attribute    | boolean                      | true    | whether to show image attribute                                  | false    |
| zoomable     | boolean                      | true    | whether to show 'zoom' buttom                                    | false    |
| rotatable    | boolean                      | true    | whether to show 'rotate' button                                  | false    |
| scalable     | boolean                      | true    | whether to show 'scale' button                                   | false    |
| downloadable | boolean                      | true    | whether to show 'download' button                                | false    |

## Keyboard support

- `Esc`: Close viewer.
- `←`: View the previous image.
- `→`: View the next image.
- `↑`: Zoom in the image.
- `↓`: Zoom out the image.
- `Ctrl + 1`: Reset the image.
- `Ctrl + ←`: Rotate left the image.
- `Ctrl + →`: Rotate right the image.


## License

MIT

[npm-image]: https://badge.fury.io/js/react-viewer-mda.svg
[npm-url]: https://npmjs.org/package/react-viewer-mda

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