@l1nyanm1ng/react-picture-viewer
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.

react-picture-viewer

An picture viewer for React with no dependencies.

ReactPictureViewer Demo

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.

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)
Downloads
Today 0
This Week 23
This Month 35
Last Day 23
Last Week 0
Last Month 20
Dependencies (524)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |