@peyman-mohtashami/react-pan-and-zoom

1.0.2 • Public • Published

This project was bootstrapped with Create React App.

React Pan and Zoom

A react component for zooming and panning images.

Features

  • Zoom-in/out with mouse wheel
  • Zoom-in/out with pinch-out/in on touch devices
  • Drag and pan image
  • Double click for zoom-in/out
  • Double tap for zoom-in/out on touch devices

Demo

http://virtechgroup.com/react-demo/react-pan-and-zoom/

Installation

npm

npm install @peyman-mohtashami/react-pan-and-zoom

local

git clone https://github.com/peyman-mohtashami/react-pan-and-zoom.git
npm install
npm start

Options

  • width (string, default: 500px): container width - "50%", "500px", "100vh"
  • height (string, default: 500px): container height - "500px", "100vh"

Example

import PanAndZoom from "@peyman-mohtashami/react-pan-and-zoom";

<PanAndZoom height="500px" width="100%">
	<img src="http://sample.image.url.com" alt="Sample Image" />
</PanAndZoom>;

Tested on

  • Chrome 75.0.3770.100
  • Firefox 68.0
  • Edge 42.17134.1.0
  • Opera 62.0.3331.72
  • Chrome Android 75.0.3770.143
  • Samsung Internet 9.2.10.15
  • Brave 0.66.99

License

Licensed under the MIT License.

Credits

Inspired by:

Package Sidebar

Install

npm i @peyman-mohtashami/react-pan-and-zoom

Weekly Downloads

5

Version

1.0.2

License

none

Unpacked Size

16.2 kB

Total Files

4

Last publish

Collaborators

  • peyman-mohtashami