Zoom and pan html elements in easy way
npm install scroll-to-zoom-mfe> 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
- ๐ 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
---
``bash`
npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch
`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 (
initialPositionX={200}
initialPositionY={100}
>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (

Example text
)}
);
};
`
or
`tsx
import React, { useRef } from "react";
import {
TransformWrapper,
TransformComponent,
ReactZoomPanPinchRef,
} from "react-zoom-pan-pinch";
const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
<>
>
);
const Component = () => {
const transformComponentRef = useRef
const zoomToImage = () => {
if (transformComponentRef.current) {
const { zoomToElement } = transformComponentRef.current;
zoomToElement("imgExample");
}
};
return (
initialPositionX={200}
initialPositionY={100}
ref={transformComponentRef}
>
{(utils) => (

Example text
)}
);
};
``
MIT ยฉ prc5