react-imageview

Imageview component built with react

Demo

You can find demo in folder example

Usage with React

1、Install the package

npm install react-imageview --save

2、Using as your need

// Example 1:

import React, { Component } from 'react'
import ImageView from 'react-imageview'

import 'react-imageview/dist/react-imageview.min.css'

class Main extends Component {
    state = {
        showViewer: false
    }
    render() {
        const imagelist = ['./1.png','./2.png','./3.png','./4.png']
        return (
            <div>
                {
                    !!this.state.showViewer && <ImageView imagelist={imagelist} />
                }
                <button onClick={e=>this.show()}>click me to show Alert</button>
            </div>
        )
    }
    show() {
        this.setState({
            showViewer: true
        })
    }
}

// Example 2:

import { SingleImgView } from 'react-imageview'
import 'react-imageview/dist/react-imageview.min.css'

// You can call SingleImgView.show anywhere and anytime, there will be only one View DOM node be added.

const imagelist = ['./1.png','./2.png','./3.png','./4.png']
SingleImgView.show({ imagelist });

Configuration

| Param | Type | Description | | :------------- | :------------- | :------------- | | imagelist | array | The list of images to view | | disablePinch | bool | Disable pinch function | | disableRotate | bool | Disable rotate function | | disableDoubleTap | bool | Disable double tap function | | longTap | function | Events called after the long tap |

License

Copyright(c) 2016-2017 AlloyTeam. Licensed under MIT license.