Popularity
5.3
Stable
Activity
5.4
-
621
12
123
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags:
UI Components
Photo / Image
UI
React
React-component
Component
Svg
Pan
Zoom
User
Interface
Web-components
Latest version: v3.8.0
react-svg-pan-zoom alternatives and similar libraries
Based on the "Photo / Image" category.
Alternatively, view react-svg-pan-zoom alternatives based on common mentions on social networks and blogs.
-
react-image-gallery
React carousel image gallery component with thumbnail support ๐ผ -
react-images
๐ A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS -
react-particle-image
Render images as interactive particles -
react-compare-image
React component to compare two images with a slider -
react-intense
A React component for viewing large images up close ๐ -
react-lightgallery
React wrapper for lightgallery.js
Appwrite - The Open Source Firebase alternative introduces iOS support
Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
Promo
appwrite.io
Do you think we are missing an alternative of react-svg-pan-zoom or a related project?
README
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.
<!-- BEGIN_SECTION_SKIPPED_ONLINE -->
Live Demo
available at http://chrvadala.github.io/react-svg-pan-zoom/ <!-- END_SECTION_SKIPPED_ONLINE -->
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
- [Getting Started](./docs/getting-started.md#props)
- [Props](./docs/documentation.md#props)
- [Methods](./docs/documentation.md#methods)
- [API](./docs/documentation.md#api)
- [Autosizer viewer](./docs/autosizer-viewer.md)
- [SVG dynamically loaded](./docs/svg-dynamically-loaded.md)
<!-- BEGIN_SECTION_SKIPPED_ONLINE -->
Install
NPM
npm install --save react-svg-pan-zoom
YARN
yarn add react-svg-pan-zoom
UMD
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<!-- END_SECTION_SKIPPED_ONLINE -->
Usage examples
- [Basic](./examples/controlled-component) - Basic usage of
<ReactSVGPanZoom>
. - [Uncontrolled Component](./examples/uncontrolled-component) - Basic usage of
<UncontrolledReactSVGPanZoom>
. - JSFiddle - This is a JSFiddle demo that uses UMD bundle.
- CodeSandbox - This is a CodeSandbox demo.
Changelog
- v2.0 - Project refactor. Follow [this guide](./docs/migrate-from-v1-to-v2.md) for migration instructions.
- v2.1 - Adds
setPointOnViewerCenter
,reset
methods andclassName
,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
andscaleFactor
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
andonZoom
callbacks, Upgrade deps, Fixes boundaries feature - v2.17 - Upgrades deps
- v2.18 - Introduces
toolbarProps.SVGAlignX
andtoolbarProps.SVGAlignY
props. Adds alignment configuration infitToViewer(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 theminiatureProp
andtoolbarProp
props. Migration guide is available [here](./docs/migrate-from-v2-to-v3.md). - 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, addsactiveToolColor
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
Some projects using react-svg-pan-zoom
- Learn Anything
- React Planner
- Python extension for vscode
- Others...
- Pull request your project!