react-quick-pinch-zoom

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

• API documentation
• Web demos

Install

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

or

yarn add react-quick-pinch-zoom

Screenshots

Video...

Usage

`jsx harmony 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}> </QuickPinchZoom> ); }; `

License

MIT © retyui

Change Log

This project adheres to Semantic Versioning.

5.0.0

• Fix: inconsistent zooms in different screen-sizes. #75 (thanks Blindman139)

4.9.0

• Declare tslib as dependencies instead of peerDependencies. #75 (thanks Tim Fischbach)

4.8.0

• Added centerContained: boolean to allow ensuring that images remain centered as long as they still fit into the container. #73 (thanks Tim Fischbach)

4.7.0

• Added enforceBoundsDuringZoom: boolean prop to ensures that it's also not possible to move the image out of bounds with a pinch gesture. #72 (thanks Tim Fischbach)
• Added doubleTapZoomOutOnMaxScale: boolean & doubleTapToggleZoom?: boolean props to let the second of two consecutive double taps zoom out again. #70 (thanks Tim Fischbach)

4.6.0

• Added zoom out on double tap doubleTapZoomOutOnMaxScale: boolean #64 (thanks Maximuson)

4.5.0

• Added a 5-pixel tolerance to the drag event in order to allow clicking #57 (thanks bradcerasani)

4.4.0

• Added possibility to use this module inside an image slider with own touch support #51 (thanks martinkutter)

  To enabled it, just add shouldCancelHandledTouchEndEvents={true}

4.3.0

• Fix SSR issue #49 (thanks bradcerasani)

4.2.0

• Mark all peerDependencies as optional

4.1.0

• Allow disabling double tap #46 (thanks matt-tingen)
• Export public API types #45 (thanks matt-tingen)

4.0.2

• Fixed typescript types #36

4.0.0

• Added support SSR #30 (thanks nicolas-cusan)

3.0.0

• Add typescript definitions
• Reduce package size
• Remove classnames
• Remove css loader

2.0.11

Add support inertia #1

2.0.0

Initial version