react-picture-viewer

An picture viewer for React with no dependencies.

English | 简体中文

Features

• You can freely drag picture within the viewport
• You can freely zoom picture within the viewport
• Min/max zoom size
• No dependencies

Installation

npm install react-picture-viewer --save

or

yarn add react-picture-viewer

Demo

You can run the project locally to see the demo.

yarn start

or

npm run start

Usage

Include the main js module:

import ReactPictureViewer from 'react-picture-viewer'

Example

class PicViewer extends React.Component {
  // ...
  render() {
    return (
      <div>
        <PictureViewer>
          <img src="..." alt="picture" draggable="false" />
        </PictureViewer>
      </div>
     )
  }
  // ...
}

Props

children (required)

<PictureViewer>
  <img src="..." alt="picture" draggable="false" />
</PictureViewer>

You should always pass an <Img /> element as its children.

id (optional)

<div>
  <PictureViewer id="picture-viewer1">...</PictureViewer>
  <PictureViewer id="picture-viewer2">...</PictureViewer>
</div>

Unique identifier for components, useful when rendering multiple components on a page

className (optional)

<PictureViewer className="picture-viewer">...</PictureViewer>

ClassName

center (optional)

<PictureViewer center>...</PictureViewer>

If true then the pictures will be displayed in the middle of the viewport, default to true.

contain (optional)

<PictureViewer contain>...</PictureViewer>

If true then the initial size of the picture will be limited to the viewport, else the image will be displayed in the original size, default to true.

width (optional)

<PictureViewer width={500}>...</PictureViewer>

<PictureViewer width="50vw">...</PictureViewer>

Width of viewport, it can be string or number.

height (optional)

<PictureViewer height={400}>...</PictureViewer>

<PictureViewer width="40%">...</PictureViewer>

Height of viewport, it can be string or number.

minimum (optional)

<PictureViewer minimum={1}>...</PictureViewer>

Minimum scaling ratio, default to 0.8

maximum (optional)

<PictureViewer maximum={5}>...</PictureViewer>

Maximum scaling ratio, default to 8

rate (optional)

<PictureViewer rate={20}>...</PictureViewer>

The rate of Image Scaling, default to 10. Bigger the number you set, faster the image will zoom in.