react-svg-pan-zoom

A React component that adds pan and zoom features to SVG

View project on GitHub

Viewer

Features

This component works with three different mode selected through an attribute:

  • With the tool pan the user can move the image dragging it inside the viewer
  • With the tool zoom the user can scale the image through a point click or zoom a specified area
  • With the tool none the user can interact with the SVG content and trigger browser events

Additional Features

  • Detect zoom performed through pinch and scroll (optional)
  • Perform autopan when the mouse is close to the edge of the viewer (optional)
  • Each callback function receives (x,y) coords mapped to the real SVG size
  • Fully stateless
  • Event info managed with lazy mode to ensure high performance
  • ES6 syntax

Props

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

ViewerEvent

  • SyntheticEvent originalEvent - The original React event
  • 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 width and height to works properly. If you need an autosized component you can get the dimensions of a wrapper element and pass them as properties to the child element through ReactDimension.

Fork me on GitHub