# @evecoffee/react-viewer-mobile

> react image viewer for mobile

Latest version **0.1.5** (published 2018-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @evecoffee/react-viewer-mobile
pnpm add @evecoffee/react-viewer-mobile
yarn add @evecoffee/react-viewer-mobile
bun add @evecoffee/react-viewer-mobile
```

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2018-07-10 |
| First published | 2018-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 75.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | infeng |
| Maintainers | coolcoffee |
| Keywords | react, typescript, image, viewer, mobile |

## Links

- npm: https://www.npmjs.com/package/@evecoffee/react-viewer-mobile
- Repository: https://github.com/infeng/react-viewer-mobile
- Homepage: https://github.com/infeng/react-viewer-mobile#readme
- Issues: https://github.com/infeng/react-viewer-mobile/issues
- npm.io page: https://npm.io/package/@evecoffee/react-viewer-mobile

## 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.5 (latest) — 2018-07-10
- 0.1.4 — 2018-07-10

## README

# react-viewer-mobile

react image viewer for mobile

## Introduction

[react-viewer](https://github.com/infeng/react-viewer) for mobile.

## Installation

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

## Usage

```javascript
import * as React from 'react';
import Viewer from 'react-viewer-mobile';
import 'react-viewer-mobile/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}
        images={[src: '', alt: '']}
        />
      </div>
    );
  }
}
```

## Props

| props       | type         | default | description                 | required |
|-------------|--------------|---------|-----------------------------|----------|
| visible     | string       |  false  | Viewer visible             | 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 |

## Gesture support

- slide
- pinch


## License

MIT

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