Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

react-svg-pan-zoom

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-svg-pan-zoom

A React component that adds pan and zoom features to SVG

3.9.0
Source
npm

Version published: 4 years ago

Weekly downloads: 65K; increased by163.12%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

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.

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

Basic - Basic usage of <ReactSVGPanZoom>.
Uncontrolled Component - Basic usage of <UncontrolledReactSVGPanZoom>.
Advanced usage - Complex usage of <ReactSVGPanZoom> that uses some advanced features.
JSFiddle - This is a JSFiddle demo that uses UMD bundle.
CodeSandbox - This is a CodeSandbox demo.

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.
v3.1 - Upgrades to storybook 5 and transformation-matrix 2; Fixes some Babel configuration issues
v3.2 - Upgrades deps
v3.3 - Adds SVG viewbox prop support #150
v3.4 - Upgrades deps and increases code quality (fixing eslint warnings)
v3.5 - Handles wheel event as passive #158, upgrades deps
v3.6 - Adds some unit tests, Fixes #161, upgrades deps
v3.7 - Adds some more unit tests, upgrades deps
v3.8 - Adds cover option on fitToViewer method #167, adds activeToolColor property #168, upgrades deps
v3.9 - Exports toolbar icons and buttons #192

Some projects using react-svg-pan-zoom

Contributors

Keywords

FAQs

What is react-svg-pan-zoom?

Is react-svg-pan-zoom popular?

Is react-svg-pan-zoom well maintained?

Package last updated on 31 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install