@ezsper/react-scalable NPM

react-scalable

A React component that adds pinch-zoom and pan capability to an img element or whatever. Both mobile and desktop browsers are supported. In desktop mode, you zoom with the mouse scrollwheel, and pan by dragging.

On render, the zoom and pan values are applied using CSS transforms.

Install

npm install @ezsper/react-scallable --save

Try it out

Online

Comming Soon

Local

git clone https://gitlab.com/ezsper.dev/react/components/scalable.git react-scalable
cd react-scalable
npm install
npm start
Browse to http://localhost:3001

Usage

import React from "react";
import Scalable from "@ezsper/react-scalable";

const App = () => {
    return (
        <div style={{ width: '500px', height: '500px' }}>
            <Scalable>
                <img alt='Test Image' src='http://picsum.photos/750/750' />
            </Scalable>
        </div>
    );
};

API

Prop	Type	Default	Description
initialScale	number	null	The initial scale of the image. When `null`, the image will be proportionally 'autofit' to the container.
initialTop	number	null	The initial top of the image.
initialLeft	number	null	The initial left of the image.
minScale	number	null	The minimum scale to which the image can be zoomed out. When `null`, the minimum scale is the 'autofit' scale.
maxScale	number	1	The maximum scale to which the image can be zoomed in.
position	'center' or 'topLeft'	'topLeft'	Position of the image relative to the container. Applies when the scaled image is smaller than the container.
doubleTapBehavior	'reset' or 'zoom'	'reset'	Whether to zoom in or reset to initial scale on double-click / double-tap.