🔍React hook for zoom and pan
yarn add use-zoom-pan
# or
npm i use-zoom-pan --save
You can try to play by yourself starting with this CodeSandbox snippet: https://codesandbox.io/s/use-zoom-pan-x0vf2
https://github.com/kwdowik/use-zoom-pan/blob/master/CHANGELOG.md
import React, { useRef } from 'react';
import { useZoomPan } from "./useZoomPan";
export default function Component() {
const ref = useRef(null);
const { zoom } = useZoomPan({ element: ref });
const handleZoom = (event) => {
if (!event.ctrlKey) return;
event.preventDefault();
zoom(event);
};
return (
<div>
<h1>Title</h1>
<div ref={ref} onWheel={handleZoom}>
Zoom
</div>
</div>
);
}
import React, { useRef } from 'react';
import { useZoomPan } from "./useZoomPan";
export default function Component() {
const ref = useRef(null);
const { panBy } = useZoomPan({ element: ref });
const handlePan = (event) => {
if (!event.shiftKey) return;
event.preventDefault();
panBy(event);
};
return (
<div onMouseMove={handlePan}>
<h1>Title</h1>
<div ref={ref}>
Pan
</div>
</div>
);
}
You can provide additional options useZoomPan
:
Option | Default | Description |
---|---|---|
minScale | .1 | Minimum value for the zoom out |
maxScale | 30 | Maximum value for the zoom in |
scaleSensitivity | 50 | The zoom sensitivity |