react-wx-images-viewer

中文文档

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

• demo1

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

• react-modal
• react-viewer-mobile
• react-image