🖼 React Zoom Pan Pinch

@jboolean fork

This fork adds

- Ability to separate event-receiving part from component to transform. This
allows you to have e.g. an overlay inside the zoom container but is not itself
zoomed.
- zoomToPoint method to allow zooming to a specific point on the screen. Used to
implement a "click to zoom" feature.

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

#### 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

Try other BetterTyped projects

Do you like this library? Try out other projects

⚡Hyper Fetch - Fetching and
realtime data exchange framework.

---

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,
useControls,
} from "react-zoom-pan-pinch";

const Controls = () => {
const { zoomIn, zoomOut, resetTransform } = useControls();

return (


License

MIT © prc5

Help me keep working on this project ❤️

- Become a Sponsor on GitHub

💖 Our sponsors