0.2.14 • Published 5 years ago

react-responsive-pinch-zoom-pan-withoutwheel v0.2.14

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

react-responsive-pinch-zoom-pan-withoutwheel

A React component that adds pinch-zoom and pan capability to an <img> element. Both mobile and desktop browsers are supported. On desktop browsers, zoom is triggered via the mouse scrollwheel.

Zoom and pan are applied using CSS transforms.

Install

npm install react-responsive-pinch-zoom-pan-withoutwheel --save

Try it out

Online

Demo

Local

  1. git clone https://github.com/bradstiff/react-responsive-pinch-zoom-pan-withoutwheel.git
  2. cd react-responsive-pinch-zoom-pan-withoutwheel
  3. npm install
  4. npm start
  5. Browse to http://localhost:3001

Usage

import React from "react";
import PinchZoomPan from "react-responsive-pinch-zoom-pan-withoutwheel";

const App = () => {
    return (
        <div style={{ width: '500px', height: '500px' }}>
            <PinchZoomPan>
                <img alt='Test Image' src='http://via.placeholder.com/750x750' />
            </PinchZoomPan>
        </div>
    );
};
0.2.14

5 years ago

0.2.13

5 years ago

0.2.12

5 years ago

0.2.11

5 years ago

0.2.10

5 years ago

0.2.7

5 years ago

0.2.9

5 years ago

0.2.8

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.4

5 years ago

0.2.3

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago