Find Similar Packages for react-svg-pan-zoom
Search packages..
1 Year
react-svg-pan-zoomSimilar Packages:
Package Weekly Downloads Trend
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-svg-pan-zoom82,4766861.02 MB416 months agoMIT
Similar Npm Packages to react-svg-pan-zoom

react-svg-pan-zoom is a powerful library for React applications that allows users to pan and zoom SVG elements easily. It provides a simple and intuitive interface for interacting with SVG graphics, making it ideal for applications that require detailed visualizations, such as maps, diagrams, or illustrations. With features like touch support, keyboard navigation, and customizable controls, react-svg-pan-zoom enables developers to create interactive and user-friendly experiences for their users.

While react-svg-pan-zoom is a robust solution for SVG manipulation, there are alternatives available that also provide similar functionality. One notable alternative is:

  • react-zoom-pan-pinch. This library offers a flexible and easy-to-use solution for implementing zoom and pan functionality in React applications. It supports both SVG and HTML elements, making it versatile for various use cases. react-zoom-pan-pinch provides features such as pinch-to-zoom support for touch devices, customizable zoom levels, and smooth animations. If you need a library that can handle both SVG and non-SVG elements while providing a straightforward API for zooming and panning, react-zoom-pan-pinch is an excellent choice.

To see how react-svg-pan-zoom compares with react-zoom-pan-pinch, check out the comparison: Comparing react-svg-pan-zoom vs react-zoom-pan-pinch.

README for react-svg-pan-zoom

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.

chrvadala Test 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.
  • 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
  • 3.10 - Upgrades deps; Migrates to React 17 and Storybook 6; Updates examples and docs to React hooks
  • 3.11 - Migrates from yarn to npm; Makes use of chrvadala/github-actions; Updates deps;
  • 3.12 - Migrates to gh-sponsor; Improves docs; Deprecates v1 migration guide; Upgrades deps;
  • 3.13 - Fixes migration doc #218; Removes deprecated defaultProps; Migrates to Storybook 8; Upgrades deps; Upgrades gh-actions;

Some projects using react-svg-pan-zoom

Contributors

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.