react-zoom-pan-pinch
v3.7.0TypeScript
Zoom and pan html elements in easy way
0/weekUpdated 1 years agoMITUnpacked: 441.5 KB
Published by prc5
npm install react-zoom-pan-pinch🖼 React Zoom Pan Pinch
> Super fast and light react npm package for zooming, panning and pinching html
> elements in easy way
#### Sources
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 (
);
};
const Example = () => {
return (
initialPositionX={200}
initialPositionY={100}
>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
<>
Example text
)}
);
};
``
License
MIT © prc5
Help me keep working on this project ❤️
💖 Our sponsors
