npm

Does your artifact manager get in the way? Join us on Oct. 8 at 10am PT, to discuss how npm can help.Sign up »

react-quick-pinch-zoom

2.0.12 • Public • Published

react-quick-pinch-zoom

NPM Travis build status

A react component that lets you zooming and dragging on any DOM element using multi-touch gestures on mobile devices and mouse-events\wheel on desktop devices. Based on this module manuelstofer/pinchzoom

Component features:

  • 🔮 Simple. Easy to use;
  • 🍎 It works with mobile touch gestures and desktop mouse events;
  • ⚡ Fast, 60 FPS on mobile devices.

Links

Install

yarn add react-quick-pinch-zoom

Screenshots

Video...

Usage

import React, { Component, createRef } from "react";
 
import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";
 
class App extends Component {
  imgRef = createRef();
 
  onUpdate = ({ x, y, scale }) => {
    const { current: img } = this.imgRef;
    const value = make3dTransformValue({ x, y, scale });
 
    img.style.setProperty("transform", value);
  };
 
  render() {
    return (
      <QuickPinchZoom onUpdate={this.onUpdate}>
        <img
          ref={this.imgRef}
          src="https://user-images.githubusercontent.com/4661784/56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png"
        />
      </QuickPinchZoom>
    );
  }
}

License

MIT © retyui

install

npm i react-quick-pinch-zoom

Downloadsweekly downloads

4,579

version

2.0.12

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability