react-svg-pan-zoom

A React component that adds pan and zoom features to SVG

View project on GitHub

Viewer

Features

This component can work in three different modes depending on the selected tool:

  • With the tool pan the user can move the image dragging it around within the viewer
  • With the tool zoom the user can scale the image either with a point click or selecting a region to zoom the specified area
  • With the tool none the user can interact with the SVG content and trigger browser events

Additional Features

  • Zoom detection performed through pinch and scroll (optional)
  • Autopan when the mouse is close to the edge of the viewer (optional)
  • Each callback function receives (x,y) coords mapped to the real size of the SVG
  • Fully stateless
  • Event info managed lazily to ensure high performance
  • ES6 syntax

Props

  • widthrequired – width of the viewer displayed on screen (if you want to omit this see Autosize)
  • heightrequired – height of the viewer displayed on screen (if you want to omit this see Autosize)
  • background – background of the viewer (default color: dark grey)
  • style - CSS style of the viewer
  • specialKeys - array of keys used in zoom mode to switch between zoom-in and zoom-out (default binding: Win/Cmd, Ctrl)
  • detectPinch - detect zoom operation performed trough pinch gesture or mouse scroll
  • detectAutoPan - perform PAN if the mouse is on the border of the viewer
  • SVGBackground - background of the SVG (default color: white)
  • value - value of the viewer (current point of view)
  • tool - active tool ( one of none, pan, zoom, zoom-in, zoom-out )
  • onChange - handler for changes fn(viewerEvent)
  • onClick - handler for click fn(viewerEvent)
  • onMouseUp - handler for mouseup fn(viewerEvent)
  • onMouseMove - handler for mousemove fn(viewerEvent)
  • onMouseDown - handler for mousedown fn(viewerEvent)

ViewerEvent attributes

Your event handlers will be passed instances of ViewerEvent. It has some useful attributes (See below). If your purpose demands you to have the original React event instance (SyntheticEvent), it is provided by event.originalEvent.

  • SyntheticEvent originalEvent - The original React event
  • SVGSVGElement SVGViewer - Reference to SVGViewer
  • object - coordinate (x,y) of the event mapped to SVG coordinates
  • number x - x coordinate of the event mapped to SVG coordinates
  • number y - y coordinate of the event mapped to SVG coordinates
  • number scaleFactor - zoom level
  • number translationX - x delta from the viewer origin
  • number translationY - y delta from the viewer origin

Usage

See here a demo code
npm install --save react-svg-pan-zoom

Autosize

React SVG Pan Zoom requires the properties width and height to be set in order to work properly. If you need an autosized component you can use ReactDimension to get the dimensions of a wrapper element and pass them as properties to its/the child element.

Fork me on GitHub