Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

pinch-to-zoom

1.0.1 • Public • Published

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} />
}

Install

npm i pinch-to-zoom

DownloadsWeekly Downloads

55

Version

1.0.1

License

MIT

Unpacked Size

27.5 kB

Total Files

14

Last publish

Collaborators

  • avatar