react-kw-images-viewer

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

Usage no npm install needed!

<script type="module">
  import reactKwImagesViewer from 'https://cdn.skypack.dev/react-kw-images-viewer';
</script>

README

中文文档

Description

react-wx-images-viewer 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

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

How to use

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 TODO
pointer DIY pointer component WxImageViewer default Pointer TODO

Reference