@revodigital/react-pan

Package to allow panning and zooming

Usage no npm install needed!

<script type="module">
  import revodigitalReactPan from 'https://cdn.skypack.dev/@revodigital/react-pan';
</script>

README

react-zoom-pan-pinch

NPM npm bundle size JavaScript Style Guide NPM npm GitHub stars

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

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
        initialScale={1}
        initialPositionX={200}
        initialPositionY={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>
    );
  }
}

License

MIT © prc5