@arist0tl3/react-zoom-pan-pinch v1.6.2

react-zoom-pan-pinch

Super fast and light react npm package for zooming, panning and pinching html elements in easy way

Features

• :rocket: Fast and easy to use
• :factory: Light, without external dependencies
• :gem: Mobile gestures, touchpad gestures and desktop mouse events support
• :gift: Powerful context usage, which gives you a lot of freedom
• :wrench: Highly customizable
• :crown: Animations and many options

DEMO

DEMO EXAMPLE

Install

npm install --save react-zoom-pan-pinch

or

yarn add react-zoom-pan-pinch

Usage

import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper>
        <TransformComponent>
          <img src="image.jpg" alt="test" />
        </TransformComponent>
      </TransformWrapper>
    );
  }
}

or

import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        defaultScale={1}
        defaultPositionX={200}
        defaultPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={zoomIn}>+</button>
              <button onClick={zoomOut}>-</button>
              <button onClick={resetTransform}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

Props of TransformWrapper

Options prop elements

scalePadding prop elements

Wheel prop elements

Pan prop elements

Pinch prop elements

zoomIn prop elements

zoomOut prop elements

doubleClick prop elements

reset prop elements

Animations types

Double click modes

Values returned from TransformWrapper component

License

MIT © prc5

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!