Zoom and pan html elements in easy way
npm install react-zoom-pan-pinch-srbash
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 }) => (
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(null);
const zoomToImage = () => {
if (transformComponentRef.current) {
const { zoomToElement } = transformComponentRef.current;
zoomToElement("imgExample");
}
};
return (
initialScale={1}
initialPositionX={200}
initialPositionY={100}
ref={transformComponentRef}
>
{(utils) => (
Example text
)}
);
};
``