react-zoom-pan-pinch-gpu

v1.0.0

Published

3 years ago

Alteration on react-zoom-pan-pinch that uses translate3d() and scale3d() for the hardware acceleration. This is a test, will make PR on main project if this works out.

Downloads

0High
0Medium
0Low

matthew.powaschuk

react zoom pan pinch animation velocity css fast transformations scale drag viewer reacts touch css3 svg bounds context

react-zoom-pan-pinch

npm bundle size NPM npm

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

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>
    );
  }
}

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

| Props | Default | Type | | :--------------- | :-----: | -------: | | scale | 1 | number | | positionX | auto | number | | positionY | auto | number | | defaultPositionX | null | number | | defaultPositionY | null | number | | defaultScale | null | number | | options | {...} | object | | wheel | {...} | object | | pan | {...} | object | | pinch | {...} | object | | zoomIn | {...} | object | | zoomOut | {...} | object | | doubleClick | {...} | object | | reset | {...} | object | | scalePadding | {...} | object | | onWheelStart | null | Function | | onWheel | null | Function | | onWheelStop | null | Function | | onPanningStart | null | Function | | onPanning | null | Function | | onPanningStop | null | Function | | onPinchingStart | null | Function | | onPinching | null | Function | | onPinchingStop | null | Function | | onZoomChange | null | Function | | enablePadding | true | Boolean | | enablePanPadding | true | Boolean |

Options prop elements

| Props | Default | Type | | :--------------- | :-----: | -----------: | | disabled | false | boolean | | transformEnabled | true | boolean | | minPositionX | null | null, number | | maxPositionX | null | null, number | | minPositionY | null | null, number | | maxPositionY | null | null, number | | minScale | 1 | number | | maxScale | 8 | number | | limitToBounds | true | boolean | | limitToWrapper | false | boolean | | centerContent | true | boolean |

scalePadding prop elements

| Props | Default | Type | | :------------ | :-----: | ------: | | disabled | false | boolean | | size | 0.45 | number | | animationTime | 200 | number | | animationType | easeOut | string |

Wheel prop elements

| Props | Default | Type | | :-------------- | :-----: | ------: | | disabled | false | boolean | | step | 6.5 | number | | wheelEnabled | true | boolean | | touchPadEnabled | true | boolean | | limitsOnWheel | true | boolean |

Pan prop elements

| Props | Default | Type | | :-------------------- | :-----: | ----------------------------------------------: | | disabled | false | boolean | | disableOnTarget | [] | array of class names or node tags (div,span...) | | lockAxisX | false | boolean | | lockAxisY | false | boolean | | velocity | false | boolean | | velocityEqualToMove | false | boolean | | velocitySensitivity | 1 | number | | velocityMinSpeed | 1.2 | number | | velocityBaseTime | 1800 | number | | velocityAnimationType | easeOut | string | | padding | true | boolean | | paddingSize | 40 | number | | animationTime | 200 | number | | animationType | easeOut | string |

Pinch prop elements

| Props | Default | Type | | :------- | :-----: | ------: | | disabled | false | boolean |

zoomIn prop elements

| Props | Default | Type | | :------------ | :-----: | ------: | | disabled | false | boolean | | step | 70 | number | | animation | true | boolean | | animationTime | 200 | number | | animationType | easeOut | string |

zoomOut prop elements

doubleClick prop elements

| Props | Default | Type | | :------------ | :-----: | -----------------------: | | disabled | false | boolean | | step | 70 | number | | animation | true | boolean | | animationTime | 200 | number | | animationType | easeOut | string | | mode | zoomIn | zoomIn / zoomOut / reset |

reset prop elements

| Props | Default | Type | | :------------ | :-----: | ------: | | disabled | false | boolean | | animation | true | boolean | | animationTime | 200 | number | | animationType | easeOut | string |

Animations types

Double click modes

Values returned from TransformWrapper component

| Value | Description | Type | | :---------------------------------------------------------------------- | :--------------------------------------------- | :------------: | | setScale(scale, animationTime, animationType) | Sets scale | Number | | setPositionX(positionX, animationTime, animationType) | Sets position x | Number | | setPositionY(positionY, animationTime, animationType) | Sets position y | Number | | zoomIn() | Zooming in function, used for controls button | --- | | zoomOut() | Zooming out function, used for controls button | --- | | setTransform(positionX, positionY, scale, animationTime, animationType) | Sets transformations of content | Number or null | | resetTransform() | Reset transformations to the initial values | Number |

License

MIT © prc5

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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