README
pinch-to-zoom
Instagram like Pinch-to-zoom.
DEMO Pinch on multitouch devices on images.
No dependencies.
Usage
interface PinchToZoomConfig {
maxScale: number;
minScale: number;
transitionDuration: number;
onScale?: (scale: number, translateX: number, translateY: number) => any;
}
new PinchToZoom(element: HTMLElement, options?: PinchToZoomConfig);
Default Options
maxScale: 4
minScale: 1
transitionDuration: 100
React Usage
import React from 'react';
import {PinchToZoom} from 'pinch-to-zoom';
export class PinchToZoomImage extends React.Component {
imgRef = React.createRef();
pinchToZoom = null;
componentDidMount() {
if (this.imgRef.current) {
this.pinchToZoom = new PinchToZoom(this.imgRef.current);
}
}
// Don't forget to unsubscribe before unmounting
componentWillUnmount() {
if (this.pinchToZoom) {
this.pinchToZoom.unsubscribe();
}
}
render() {
return (
<img ref={imgRef} />
);
}
}
React functional Usage
import React, { useRef, useEffect } from 'react';
import { PinchToZoom } from 'pinch-to-zoom';
const PinchToZoomImage = props => {
const imgRef = useRef(null)
const pinchToZoom = useRef(null)
useEffect(() => {
if (imgRef.current) {
pinchToZoom.current = new PinchToZoom(imgRef.current)
}
return () => {
if (pinchToZoom.current) {
pinchToZoom.current.unsubscribe()
}
}
}, [])
return <img ref={imgRef} {...props} />
}