npm.io
0.2.0 • Published 4 years ago

react-pan-zoom-map

Licence
ISC
Version
0.2.0
Deps
0
Size
13 kB
Vulns
0
Weekly
0
Stars
12
SummaryDependencyVersions

react-pan-zoom-map

Bring Figma-like pan and zoom interactions to your React app. Unlike other packages, react-pan-zoom-map works seamlessly with trackpads (scroll to pan and pinch to zoom) in addition to mice (grab to pan and wheel to zoom). Try it out for yourself...

Example

Usage

import React from "react";
import PanZoomMap from "react-pan-zoom-map";
import cheetah from "./cheetah.png";

const App: React.FC = () => {
  return (
    <PanZoomMap>
      <img src={cheetah} alt="Cheetah" />
    </PanZoomMap>
  );
};

export default App;

Installation

npm i react-pan-zoom-map

Props

Name Description Default
controlMethod 'mouse' for grab to pan and wheel to zoom or 'trackpad' for scroll to pan and pinch to zoom. 'mouse'
defaultTranslation The initial translation. This will change when you grab or scroll. {x: 0, y: 0}
defaultZoom The initial zoom. This will change when you wheel or pinch. 1
isPanEnabled Makes it so that you can or can't pan. true
isZoomEnabled Makes it so that you can or can't zoom. true
panSensitivity If you're using controlMethod='trackpad', this changes the sensitivity of your scroll to pan. 1
zoomSensitivity Changes the sensitivity of wheel to zoom or pinch to zoom. 1
minZoom How far out you can zoom. If minZoom=0.1, your elements can be up to 10x smaller. 0.1
maxZoom How far in you can zoom. if maxZoom=10, your elements can be up to 10x bigger. 10
onPanZoom A callback for when the map's translation or zoom changes. You'll have access to translation and zoom in the parameters of the callback. undefined