react-zoom-pan-pinch

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

• Demo
• Docs

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 Utils to create own tools

Install

1npm install --save @paryajafari/react-zoom-pan-pinch

Usage

1import React, { Component } from "react";
2
3import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
4
5class Example extends Component {
6  render() {
7    return (
8      <TransformWrapper>
9        <TransformComponent>
10          <img src="image.jpg" alt="test" />
11        </TransformComponent>
12      </TransformWrapper>
13    );
14  }
15}

or

1import React, { Component } from "react";
2
3import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
4
5class Example extends Component {
6  render() {
7    return (
8      <TransformWrapper
9        initialScale={1}
10        initialPositionX={200}
11        initialPositionY={100}
12      >
13        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
14          <React.Fragment>
15            <div className="tools">
16              <button onClick={() => zoomIn()}>+</button>
17              <button onClick={() => zoomOut()}>-</button>
18              <button onClick={() => resetTransform()}>x</button>
19            </div>
20            <TransformComponent>
21              <img src="image.jpg" alt="test" />
22              <div>Example text</div>
23            </TransformComponent>
24          </React.Fragment>
25        )}
26      </TransformWrapper>
27    );
28  }
29}

License

MIT © prc5