react-viewer

react-viewer

react image viewer.

Introduction

Because i can`t comfortable use viewerjs in react, so i create react-viewer to replace it.

Installation

npm install react-viewer --save

Usage

import * as React from 'react';
import Viewer from 'react-viewer';
import 'react-viewer/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}
        onClose={() => { this.setState({ visible: false }); } }
        images={[{src: '', alt: ''}]}
        />
      </div>
    );
  }
}

Props

props	type	default	description	required
visible	string	false	Viewer visible	true
onClose	string	-	Specify a function that will be called when Visible close	true
images	ImageDecorator[]	[]	image source array	true
activeIndex	number	0	active image index	false
zIndex	number	1000	Viewer css z-index	false
container	HTMLElement	null	set parent node(inline mode)	false
drag	boolean	true	whether to drag image	false
attribute	boolean	true	whether to show image attribute	false
zoomable	boolean	true	whether to show 'zoom' button	false
rotatable	boolean	true	whether to show 'rotate' button	false
scalable	boolean	true	whether to show 'scale' button	false
onMaskClick	(e) => void	-	callback function when mask is clicked	false
download	boolean	false	whether to show 'download'	false

ImageDecorator

props	type	default	description	required
src	string	-	image source	true
alt	string	-	image description	false
downloadUrl	string	-	image downlaod url	false

Keyboard support

• Esc: Close viewer.
• ←: View the previous image.
• →: View the next image.
• ↑: Zoom in the image.
• ↓: Zoom out the image.
• Ctrl + 1: Reset the image.
• Ctrl + ←: Rotate left the image.
• Ctrl + →: Rotate right the image.

License

MIT