5.1.0 • Published 4 months ago

react-quick-pinch-zoom v5.1.0

Weekly downloads
11,011
License
MIT
Repository
github
Last release
4 months ago

react-quick-pinch-zoom

react-quick-pinch-zoom on npm npm downloads react-quick-pinch-zoom install size Code quality

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

npm i --save react-quick-pinch-zoom

or

yarn add react-quick-pinch-zoom

Screenshots

npm.io

Video...

Usage

import React, { useCallback, useRef } from "react";
import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";

const IMG_URL =
  "https://user-images.githubusercontent.com/4661784/" +
  "56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png";

export const App = () => {
  const imgRef = useRef();
  const onUpdate = useCallback(({ x, y, scale }) => {
    const { current: img } = imgRef;

    if (img) {
      const value = make3dTransformValue({ x, y, scale });

      img.style.setProperty("transform", value);
    }
  }, []);

  return (
    <QuickPinchZoom onUpdate={onUpdate}>
      <img ref={imgRef} src={IMG_URL} />
    </QuickPinchZoom>
  );
};

License

MIT © retyui

5.1.0

4 months ago

5.0.0

6 months ago

4.9.0

10 months ago

4.8.0

11 months ago

4.7.0

11 months ago

4.6.0

1 year ago

4.5.0

2 years ago

4.4.1

2 years ago

4.4.0

2 years ago

4.2.0-beta.0

2 years ago

4.3.0

2 years ago

4.2.0

2 years ago

4.1.0

2 years ago

4.0.2

3 years ago

4.0.1

3 years ago

4.0.0

3 years ago

3.0.0

4 years ago

3.0.0-beta.0

4 years ago

2.0.12

5 years ago

2.0.11

5 years ago

2.0.10

5 years ago

2.0.9

5 years ago

2.0.8

5 years ago

2.0.7

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.5.4

5 years ago

1.5.3

5 years ago

1.5.2

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.0

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago