Skip to content
👀 A React component that adds pan and zoom features to SVG
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs Merge remote-tracking branch 'origin/master' Mar 8, 2019
examples splits controlled-component in simple and advanced Feb 4, 2019
src POSITION_NONE is a valid prop value for the position attribute in too… Feb 17, 2019
storybook
.editorconfig
.gitignore upgrades libraries Oct 26, 2018
LICENSE
README.md Merge remote-tracking branch 'origin/master' Mar 8, 2019
babel.config.js
package.json
react-svg-pan-zoom.gif improve README Jan 30, 2017
react-svg-pan-zoom_big.gif
webpack.config.js
yarn.lock

README.md

react-svg-pan-zoom

react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a small space.

Code npm Downloads Donate

react-svg-pan-zoom

Live Demo

available at http://chrvadala.github.io/react-svg-pan-zoom/

Features

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

  • With the tool pan the user can move the image and drag it around within the viewer, but can't interact with SVG child elements.
  • With the tool zoom the user can scale the image either with a point click or selecting a region to zoom the specified area, but can't interact with SVG child elements.
  • With the tool none the user can interact with SVG child elements and trigger events.
  • With the tool auto the user can interact with SVG child elements, perform pan (dragging the image), zoom in (double click), zoom out (double click + shift).

Documentation

Install

NPM

npm install --save react-svg-pan-zoom

YARN

yarn add react-svg-pan-zoom

UMD

<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-pan-zoom@3"></script>

Usage examples

Changelog

  • v2.0 - Project refactor. Follow this guide for migration instructions.
  • v2.1 - Adds setPointOnViewerCenter, reset methods and className, style props
  • v2.2 - Introduces tool auto, improves default toolbar
  • v2.3 - Adds touch events support
  • v2.4 - Adds es:next support, deploy new website
  • v2.5 - Adds preventPanOutside and scaleFactor props
  • v2.6 - Introduces transformation-matrix that reduces bundle size thanks to three shaking, Fixes pan limit behaviour, Replaces toolbar links with buttons, minor improvements
  • v2.7 - Adds miniature feature, Adds PropTypes support
  • v2.8 - Adds storybook demo, Remove bower support, Adds pinch to zoom feature, Fixes miniature size
  • v2.9 - Reinvents miniature and introduce props miniatureBackground, miniatureHeight, Minor improvements & fix
  • v2.10 - Introduces prop disableDoubleClickZoomWithToolAuto
  • v2.11 - Improves docs, updates deps
  • v2.12 - Exports miniature to allow customization
  • v2.13 - Fixes resize issues (#58), Upgrades deps
  • v2.14 - Introduces prop scaleFactorOnWheel, Upgrades deps
  • v2.15 - Improves autopan feature (#71), adds scaleFactorMax, scaleFactorMin props (#71), Upgrades deps
  • v2.16 - Adds onPan and onZoom callbacks, Upgrade deps, Fixes boundaries feature
  • v2.17 - Upgrades deps
  • v2.18 - Introduces toolbarProps.SVGAlignX and toolbarProps.SVGAlignY props. Adds alignment configuration in fitToViewer(SVGAlignX = "left", SVGAlignY = "top") method (#120). Upgrades deps.
  • v3.0 - Upgrades to babel 7 and storybook 4; Introduces <UncontrolledReactSVGPanZoom /> component and makes <ReactSVGPanZoom> a stateless component (except for some optimizations); Moves props related to miniature and toolbar, respectively into the miniatureProp and toolbarProp props. Migration guide is available here.

Some projects using react-svg-pan-zoom

Contributors

You can’t perform that action at this time.