# @tiendeo/react-zoom-pan-pinch

> Zoom and pan html elements in easy way

Latest version **3.3.1** (published 2019-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tiendeo/react-zoom-pan-pinch
pnpm add @tiendeo/react-zoom-pan-pinch
yarn add @tiendeo/react-zoom-pan-pinch
bun add @tiendeo/react-zoom-pan-pinch
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.3.1 |
| Published | 2019-12-10 |
| First published | 2019-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 4 |
| Unpacked size | 313.4 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1948 |
| Author | prc5 |
| Maintainers | a93jurado, amoqu, danielsola, diegofernandezfontana, pablovegau, rmyz |
| Keywords | react, zoom, pan, pinch, animation, velocity, css, fast, transformations, scale, drag, viewer, reacts, touch, css3, svg, bounds, context |

## Links

- npm: https://www.npmjs.com/package/@tiendeo/react-zoom-pan-pinch
- Repository: https://github.com/prc5/react-zoom-pan-pinch
- Homepage: https://github.com/prc5/react-zoom-pan-pinch#readme
- Issues: https://github.com/prc5/react-zoom-pan-pinch/issues
- npm.io page: https://npm.io/package/@tiendeo/react-zoom-pan-pinch

## Dependencies (4)

- [mem](https://npm.io/package/mem.md) ^5.1.1
- [debug](https://npm.io/package/debug.md) ^4.1.1
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.13.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.7.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.3.1 (latest) — 2019-12-10
- 3.3.0 — 2019-12-09
- 3.1.0 — 2019-10-23
- 2.1.0 — 2019-10-22
- 2.0.0 — 2019-10-21
- 1.1.1 — 2019-10-21
- 1.1.0 — 2019-10-21

## README

# react-zoom-pan-pinch

[![NPM](https://img.shields.io/npm/v/react-zoom-pan-pinch.svg)](https://www.npmjs.com/package/react-zoom-pan-pinch) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-zoom-pan-pinch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Package Quality](https://npm.packagequality.com/shield/react-zoom-pan-pinch.svg)](https://packagequality.com/#?package=react-zoom-pan-pinch) ![NPM](https://img.shields.io/npm/l/react-zoom-pan-pinch) ![npm](https://img.shields.io/npm/dm/react-zoom-pan-pinch) ![GitHub stars](https://img.shields.io/github/stars/prc5/react-zoom-pan-pinch?style=social)

> 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](https://prc5.github.io/react-zoom-pan-pinch/)

## Install

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

or

```bash
yarn add react-zoom-pan-pinch
```

## Usage

```jsx
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>Some text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}
```

or

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

## Props of TransformWrapper

| Props                   | Default  |           Type |
| :---------------------- | :------: | -------------: |
| isCentered              |   true   |        Boolean |
| limitToBounds           |   true   |        Boolean |
| limitToWrapperBounds    |  false   |        Boolean |
| disabled                |  false   |        Boolean |
| transformEnabled        |   true   |        Boolean |
| positionX               |    0     |         Number |
| positionY               |    0     |         Number |
| maxPositionX            |   null   | Number or null |
| minPositionX            |   null   | Number or null |
| maxPositionY            |   null   | Number or null |
| minPositionY            |   null   | Number or null |
| zoomingEnabled          |   true   |        Boolean |
| scale                   |    1     |         Number |
| maxScale                |    8     | Number or null |
| minScale                |    1     | Number or null |
| scaleAnimationPadding   |   0.15   |         Number |
| enableWheel             |   true   |        Boolean |
| enableTouchPadPinch     |   true   |        Boolean |
| wheelStep               |    4     |         Number |
| limitToWrapperOnWheel   |  false   |        Boolean |
| pinchEnabled            |   true   |        Boolean |
| pinchSensitivity        |    1     |         Number |
| panningEnabled          |   true   |        Boolean |
| lockAxisX               |  false   |        Boolean |
| lockAxisY               |  false   |        Boolean |
| enableVelocity          |   true   |        Boolean |
| velocityTimeBasedOnMove |   true   |        Boolean |
| minVelocity             |   1.6    |         Number |
| minVelocityScale        |    1     |         Number |
| velocityAnimationSpeed  |   1800   |         Number |
| velocitySensitivity     |    1     |         Number |
| dbClickMode             | "zoomIn" |         String |
| dbClickStep             |    40    |         Number |
| zoomInStep              |    40    |         Number |
| zoomOutStep             |    40    |         Number |
| zoomInAnimationSpeed    |   200    |         Number |
| zoomOutAnimationSpeed   |   200    |         Number |
| dbClickAnimationSpeed   |   200    |         Number |
| resetAnimationSpeed     |   200    |         Number |
| paddingAnimationSpeed   |   200    |         Number |
| 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 |

## Values returned from TransformWrapper component

| Value                                     | Description                                                                                            |      Type      |
| :---------------------------------------- | :----------------------------------------------------------------------------------------------------- | :------------: |
| minVelocity                               | Minimum mouse velocity which will be animated after panning is done                                    |     Number     |
| minVelocityScale                          | Velocity will be disabled if value is equal or lower than given value                                  |     Number     |
| velocityTimeBasedOnMove                   | Velocity duration is based on the mouse move - the longer the movement, the longer the animation lasts |    Boolean     |
| limitToWrapperBounds                      | Enables panning when zoom is lower than 1, and limit it to the wrapper bounds                          |    Boolean     |
| limitToWrapperOnWheel                     | Zoomed object is always inside wrapper if limitBounds is activated                                     |    Boolean     |
| limitToBounds                             | Limit zooming and panning to wrapper boundaries                                                        |    Boolean     |
| setScale(scale)                           | Sets scale                                                                                             |     Number     |
| setPositionX(positionX)                   | Sets position x                                                                                        |     Number     |
| setPositionY(positionY)                   | Sets position y                                                                                        |     Number     |
| zoomIn()                                  | Zooming in function, used for controls button                                                          |      ---       |
| zoomOut()                                 | Zooming out function, used for controls button                                                         |      ---       |
| setTransform(positionX, positionY, scale) | Sets transformations of content                                                                        | Number or null |
| resetTransform()                          | Reset transformations to the initial values                                                            |     Number     |
| dbClickMode                               | Available modes: "zoomIn", "zoomOut", "reset"                                                          |     String     |

## License

MIT © [prc5](https://github.com/prc5)

---
_Source: https://npm.io/package/@tiendeo/react-zoom-pan-pinch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._