react-picture-viewer is an image viewer for React.
Last updated 2 months ago by l1nyanm1ng .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @l1nyanm1ng/react-picture-viewer 
SYNC missed versions from official npm registry.


An picture viewer for React with no dependencies.

ReactPictureViewer Demo

English | 简体中文


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


npm install react-picture-viewer --save


yarn add react-picture-viewer


You can run the project locally to see the demo.

yarn start


npm run start


Include the main js module:

import ReactPictureViewer from 'react-picture-viewer'


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


children (required)

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

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

id (optional)

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

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

className (optional)

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


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.

Current Tags

  • 0.0.4                                ...           latest (2 months ago)

3 Versions

  • 0.0.4                                ...           2 months ago
  • 0.0.3                                ...           2 months ago
  • 0.0.1                                ...           2 months ago
Maintainers (1)
Today 0
This Week 23
This Month 35
Last Day 23
Last Week 0
Last Month 20
Dependencies (524)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |