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.
available at http://chrvadala.github.io/react-svg-pan-zoom/
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).
npm install --save react-svg-pan-zoomyarn add react-svg-pan-zoom<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-pan-zoom@3"></script>- Basic - Basic usage of
<ReactSVGPanZoom>. - Uncontrolled Component - Basic usage of
<UncontrolledReactSVGPanZoom>. - JSFiddle - This is a JSFiddle demo that uses UMD bundle.
- CodeSandbox - This is a CodeSandbox demo.
- v2.0 - Project refactor. Follow this guide for migration instructions.
- v2.1 - Adds
setPointOnViewerCenter,resetmethods andclassName,styleprops - 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
preventPanOutsideandscaleFactorprops - 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,scaleFactorMinprops (#71), Upgrades deps - v2.16 - Adds
onPanandonZoomcallbacks, Upgrade deps, Fixes boundaries feature - v2.17 - Upgrades deps
- v2.18 - Introduces
toolbarProps.SVGAlignXandtoolbarProps.SVGAlignYprops. 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 theminiaturePropandtoolbarPropprops. 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
fitToViewermethod #167, addsactiveToolColorproperty #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;
- Learn Anything
- React Planner
- Python extension for vscode
- Others...
- Pull request your project!