# react-wx-images-viewer

> Images viewer is a react component use in mobile website App, that function same as Weixin native viewer.

Latest version **1.0.6** (published 2018-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-wx-images-viewer
pnpm add react-wx-images-viewer
yarn add react-wx-images-viewer
bun add react-wx-images-viewer
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-03-17 |
| First published | 2017-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 91.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 131 |
| Author | dainli |
| Maintainers | dainli |
| Keywords | react, photos, viewer, mobile |

## Links

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

## Dependencies (2)

- [raf](https://npm.io/package/raf.md) ^3.1.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

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

- 1.0.6 (latest) — 2018-03-17
- 1.0.5 — 2018-02-26
- 1.0.4 — 2018-02-09
- 1.0.3 — 2018-01-23
- 1.0.2 — 2018-01-19
- 1.0.1 — 2018-01-19
- 1.0.0 — 2018-01-19
- 0.0.1 — 2017-07-07

## README

# [中文文档](https://github.com/react-ld/react-wx-images-viewer/blob/master/README-cn.md)

# Description
[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer/tree/master) is a React
common component use for images viewer *in mobile device*. It's function look like WeChat App previewImage.
Finger drag left or right to preview each image. Two finger drag zoom in or zoom out the image.

# Install
```shell
npm install --save react-wx-images-viewer
```

# dependence
version 0.0.1 -> React ^15.5.4

version ^1.0.0 -> React ^16.0.0

# Example
- [demo1](https://react-ld.github.io/react-wx-images-viewer/index.html)

# How to use
```js
import WxImageViewer from 'react-wx-images-viewer';
class App extends Component {

  state = {
    imags: [
      require('./assets/2.jpg'),
      require('./assets/1.jpg'),
      require('./assets/0.jpg'),
      require('./assets/3.jpg'),
      require('./assets/4.jpg'),
    ],
    index: 0,
    isOpen: false
  };

  onClose = () =>{
    this.setState({
      isOpen: false
    })
  }

  openViewer (index){
    this.setState({
      index,
      isOpen: true
    })
  }

  render() {
    const {
      imags,
      index,
      isOpen
    } = this.state;

    return (
      <div className="app">
        <div className="img-list">
          {/*直接打开*/}
          <button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button>
          {
            this.state.imags.map((item, index) => {
              return <div className="img" key={item}>
                <img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/> 
              </div>
            })
          }
        </div>
        {
          isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : ""
        }
      </div>
    )
  }
}

export default App;
```

# API：
| Property | Description | Type | default | Remarks |
| --- | --- | --- | --- | --- |
| maxZoomNum | max zoom in times | Number | 4 |  |
| zIndex | the depth of the layer | Number | 100 |  |
| index | show which image in urls array when open | Number | 0 | |
| gap | the gap between images | Number | 10 | unit is pixel |
| urls | images url array | Array | | suggest the array length do not more than 10 |
| onClose | handle close function | Function | | must remove WxViewer from current render and other sepcial logic |
| loading | DIY loading style | component | WxImageViewer default [Loading](./src/components/Loading.jsx) | TODO |
| pointer | DIY pointer | component | WxImageViewer default [Pointer](./src/components/Pointer.jsx) | TODO |

# Reference
- [react-modal](https://github.com/reactjs/react-modal)
- [react-viewer-mobile](https://github.com/infeng/react-viewer-mobile/)
- [react-image](https://github.com/mbrevda/react-image)

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