🖼 React Zoom Pan Pinch

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

Do you like this library? Try out other projects
⚡Hyper Fetch

#### Sources

- Demo
- Docs

Key Features

- 🚀 Fast and easy to use
- 🏭 Light, without external dependencies
- 💎 Mobile gestures, touchpad gestures and desktop mouse events support
- 🎁 Powerful context usage, which gives you a lot of freedom
- 🔧 Highly customizable
- 👑 Animations and Utils to create own tools
- 🔮 Advanced hooks and components

Help me keep working on this project ❤️

- Become a Sponsor on GitHub

---

Installation

``bash
npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch
`

Examples

`jsx
import React, { Component } from "react";

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

const Example = () => {
return (





);
};
`

or

`jsx
import React, { Component } from "react";

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

const Example = () => {
return (
initialScale={1}
initialPositionX={200}
initialPositionY={100}
>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (

zoomIn()}>+
zoomOut()}>-
resetTransform()}>x

Example text

)}

);
};
`

or

`tsx
import React, { useRef } from "react";
import {
TransformWrapper,
TransformComponent,
ReactZoomPanPinchRef,
} from "react-zoom-pan-pinch";

const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
<>
zoomIn()}>+
zoomOut()}>-
resetTransform()}>x

);

const Component = () => {
const transformComponentRef = useRef(null);

const zoomToImage = () => {
if (transformComponentRef.current) {
const { zoomToElement } = transformComponentRef.current;
zoomToElement("imgExample");
}
};

return (
initialScale={1}
initialPositionX={200}
initialPositionY={100}
ref={transformComponentRef}
>
{(utils) => (

Example text

)}

);
};
``

License

MIT © prc5