{"_id":"@austinbirch/react-svg-pan-zoom","_rev":"2-6631177a51b5c55aa478b925e8f559c7","name":"@austinbirch/react-svg-pan-zoom","dist-tags":{"latest":"3.12.7"},"versions":{"3.12.6":{"name":"@austinbirch/react-svg-pan-zoom","version":"3.12.6","keywords":["react","react-component","svg","pan","zoom","react","ui","user","interface","component","web-components"],"author":{"name":"chrvadala"},"license":"MIT","_id":"@austinbirch/react-svg-pan-zoom@3.12.6","maintainers":[{"name":"austinbirch","email":"mraustinbirch@gmail.com"}],"homepage":"https://orgcharthub.github.io/react-svg-pan-zoom/","bugs":{"url":"https://github.com/orgcharthub/react-svg-pan-zoom/issues"},"dist":{"shasum":"e3dc858675a077f31fa1cf0d058bc2cc4ced85f1","tarball":"https://registry.npmjs.org/@austinbirch/react-svg-pan-zoom/-/react-svg-pan-zoom-3.12.6.tgz","fileCount":41,"integrity":"sha512-ARH3Uas0Ot78Kii3ZR+3cukq5B6nA9YN/0mEs2dVFeysvsrxg82/HgN18pz0PjgyqQlyVqkOo7IrAgThAZzn1A==","signatures":[{"sig":"MEYCIQCdQxNtebZsO7G0koctg+LM7uWj20GSLUM6Yi18/OTGCwIhAIqERwcR8+/75VttUvNwGCzYSre0rmrmP0PlfLwoLp+o","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":105922},"main":"./build-commonjs/index.js","unpkg":"./build-umd/react-svg-pan-zoom.min.js","module":"./build-es/index.js","funding":"https://github.com/sponsors/chrvadala","gitHead":"8c44bf359342bff959016d7d2b384e29a28ef6bf","scripts":{"test":"npm run test:coverage","build":"npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd_min","clean":"del build-* coverage","start":"npm run website:start","build:es":"KEEP_MODULES=true babel --out-dir build-es src","build:umd":"webpack","test:jest":"jest","build:umd_min":"webpack --env minimize","test:coverage":"jest --coverage","website:build":"build-storybook -o build-website","website:start":"start-storybook -p 9001","build:commonjs":"KEEP_MODULES=false babel --out-dir build-commonjs src","prepublishOnly":"npm run clean && npm run test && npm run build"},"_npmUser":{"name":"austinbirch","email":"mraustinbirch@gmail.com"},"repository":{"url":"git+https://github.com/orgcharthub/react-svg-pan-zoom.git","type":"git"},"_npmVersion":"10.8.2","description":"A React component that adds pan and zoom features to SVG","directories":{},"jsnext:main":"./build-es/index.js","_nodeVersion":"20.19.3","dependencies":{"prop-types":"^15.8.1","transformation-matrix":"^2.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.1","react":"^18.2.0","del-cli":"^5.0.0","webpack":"^5.75.0","react-dom":"^18.2.0","@babel/cli":"^7.20.7","webpack-cli":"^5.0.1","react-scripts":"5.0.1","@storybook/react":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/node-logger":"^6.5.15","@react-hook/window-size":"^3.1.1","@storybook/addon-actions":"^6.5.15","jest-matcher-deep-close-to":"^3.0.2","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/react-svg-pan-zoom_3.12.6_1758115942689_0.027880966444486344","host":"s3://npm-registry-packages-npm-production"}},"3.12.7":{"author":{"name":"chrvadala"},"name":"@austinbirch/react-svg-pan-zoom","version":"3.12.7","description":"A React component that adds pan and zoom features to SVG","main":"./build-commonjs/index.js","module":"./build-es/index.js","unpkg":"./build-umd/react-svg-pan-zoom.min.js","jsnext:main":"./build-es/index.js","scripts":{"start":"npm run website:start","build":"npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd_min","test":"npm run test:coverage","website:start":"start-storybook -p 9001","website:build":"build-storybook -o build-website","build:commonjs":"KEEP_MODULES=false babel --out-dir build-commonjs src","build:es":"KEEP_MODULES=true babel --out-dir build-es src","build:umd_min":"webpack --env minimize","build:umd":"webpack","clean":"del build-* coverage","test:jest":"jest","test:coverage":"jest --coverage","prepublishOnly":"npm run clean && npm run test && npm run build"},"repository":{"type":"git","url":"git+https://github.com/orgcharthub/react-svg-pan-zoom.git"},"license":"MIT","bugs":{"url":"https://github.com/orgcharthub/react-svg-pan-zoom/issues"},"homepage":"https://orgcharthub.github.io/react-svg-pan-zoom/","keywords":["react","react-component","svg","pan","zoom","react","ui","user","interface","component","web-components"],"dependencies":{"prop-types":"^15.8.1","transformation-matrix":"^2.14.0"},"devDependencies":{"@babel/cli":"^7.20.7","@react-hook/window-size":"^3.1.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@storybook/node-logger":"^6.5.15","@storybook/preset-create-react-app":"^4.1.2","@storybook/react":"^6.5.15","del-cli":"^5.0.0","jest":"^29.3.1","jest-matcher-deep-close-to":"^3.0.2","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","webpack":"^5.75.0","webpack-cli":"^5.0.1"},"funding":"https://github.com/sponsors/chrvadala","publishConfig":{"access":"public"},"_id":"@austinbirch/react-svg-pan-zoom@3.12.7","gitHead":"8c44bf359342bff959016d7d2b384e29a28ef6bf","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-xR6GZqCtXoTGwBSDpbvMNMD4ww+c3DVoXH3EXs2QrCUr0zFVmyipafQNbjRvBCKSOEsrQiB8F4HczJRMBJ6/fA==","shasum":"5828c9b307e817f722cd6f2fcb4118cd4c8d44df","tarball":"https://registry.npmjs.org/@austinbirch/react-svg-pan-zoom/-/react-svg-pan-zoom-3.12.7.tgz","fileCount":121,"unpackedSize":1300772,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC/KE2gvFglwPgJCT6tLL+s1sFi0ooDKKYQo+48V24/pAiBi3DvhvbyREL9+IzWNXX00kI0eHFrF0sNtMv2jRK7z1g=="}]},"_npmUser":{"name":"austinbirch","email":"mraustinbirch@gmail.com"},"directories":{},"maintainers":[{"name":"austinbirch","email":"mraustinbirch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-svg-pan-zoom_3.12.7_1758116564514_0.9833125705485839"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-17T13:32:22.614Z","modified":"2025-09-17T13:42:44.905Z","3.12.6":"2025-09-17T13:32:22.879Z","3.12.7":"2025-09-17T13:42:44.724Z"},"bugs":{"url":"https://github.com/orgcharthub/react-svg-pan-zoom/issues"},"author":{"name":"chrvadala"},"license":"MIT","homepage":"https://orgcharthub.github.io/react-svg-pan-zoom/","keywords":["react","react-component","svg","pan","zoom","react","ui","user","interface","component","web-components"],"repository":{"type":"git","url":"git+https://github.com/orgcharthub/react-svg-pan-zoom.git"},"description":"A React component that adds pan and zoom features to SVG","maintainers":[{"name":"austinbirch","email":"mraustinbirch@gmail.com"}],"readme":"# react-svg-pan-zoom\n**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.\n\n[![chrvadala](https://img.shields.io/badge/website-chrvadala-orange.svg)](https://chrvadala.github.io)\n[![Test](https://github.com/chrvadala/react-svg-pan-zoom/workflows/Test/badge.svg)](https://github.com/chrvadala/react-svg-pan-zoom/actions)\n[![npm](https://img.shields.io/npm/v/react-svg-pan-zoom.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/react-svg-pan-zoom)\n[![Downloads](https://img.shields.io/npm/dm/react-svg-pan-zoom.svg)](https://www.npmjs.com/package/react-svg-pan-zoom)\n[![Donate](https://img.shields.io/badge/donate-GithubSponsor-green.svg)](https://github.com/sponsors/chrvadala)\n\n\n\n<!-- BEGIN_SECTION_SKIPPED_ONLINE -->\n[![react-svg-pan-zoom](https://raw.githubusercontent.com/chrvadala/react-svg-pan-zoom/master/react-svg-pan-zoom.gif)](http://chrvadala.github.io/react-svg-pan-zoom/)\n\n## Live Demo\navailable at [http://chrvadala.github.io/react-svg-pan-zoom/](http://chrvadala.github.io/react-svg-pan-zoom/)\n<!-- END_SECTION_SKIPPED_ONLINE -->\n\n## Features\nThis component can work in four different modes depending on the selected tool:\n- 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.\n- 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.\n- With the tool **none** the user can interact with SVG child elements and trigger events.\n- 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).\n\n## Documentation\n- [Getting Started](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/getting-started.md#props)\n- [Props](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#props)\n- [Methods](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#methods)\n- [API](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#api)\n- [Autosizer viewer](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/autosizer-viewer.md)\n- [SVG dynamically loaded](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/svg-dynamically-loaded.md)\n\n<!-- BEGIN_SECTION_SKIPPED_ONLINE -->\n## Install\n### NPM\n```sh\nnpm install --save react-svg-pan-zoom\n```\n### YARN\n```sh\nyarn add react-svg-pan-zoom\n```\n### UMD\n```html\n<script src=\"https://unpkg.com/prop-types@15/prop-types.js\"></script>\n<script src=\"https://unpkg.com/react-svg-pan-zoom@3\"></script>\n```\n<!-- END_SECTION_SKIPPED_ONLINE -->\n\n## Usage examples\n- [**Basic**](./examples/controlled-component) - Basic usage of `<ReactSVGPanZoom>`.\n- [**Uncontrolled Component**](./examples/uncontrolled-component) - Basic usage of `<UncontrolledReactSVGPanZoom>`.\n- [**JSFiddle**](https://jsfiddle.net/chrvadala/f67qyfsd/) - This is a JSFiddle demo that uses UMD bundle.\n- [**CodeSandbox**](https://codesandbox.io/s/1v19809803) - This is a CodeSandbox demo.\n\n## Changelog\n- **v2.0** - Project refactor. Follow [this guide](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/migrate-from-v1-to-v2.md) for migration instructions.\n- **v2.1** - Adds `setPointOnViewerCenter`, `reset` methods and `className`, `style` props\n- **v2.2** - Introduces tool `auto`, improves default toolbar\n- **v2.3** - Adds touch events support\n- **v2.4** - Adds es:next support, deploy new website\n- **v2.5** - Adds `preventPanOutside` and `scaleFactor` props\n- **v2.6** - Introduces [transformation-matrix](https://www.npmjs.com/package/transformation-matrix) that reduces bundle size thanks to three shaking, Fixes pan limit behaviour, Replaces toolbar links with buttons, minor improvements\n- **v2.7** - Adds miniature feature, Adds [PropTypes](https://www.npmjs.com/package/prop-types) support\n- **v2.8** - Adds storybook demo, Remove bower support, Adds pinch to zoom feature, Fixes miniature size\n- **v2.9** - Reinvents miniature and introduce props `miniatureBackground`, `miniatureHeight`, Minor improvements & fix\n- **v2.10** - Introduces prop `disableDoubleClickZoomWithToolAuto`\n- **v2.11** - Improves docs, updates deps\n- **v2.12** - Exports miniature to allow customization\n- **v2.13** - Fixes resize issues (#58), Upgrades deps\n- **v2.14** - Introduces prop `scaleFactorOnWheel`, Upgrades deps\n- **v2.15** - Improves autopan feature ([#71](https://github.com/chrvadala/react-svg-pan-zoom/issues/71)), adds `scaleFactorMax`, `scaleFactorMin` props ([#71](https://github.com/chrvadala/react-svg-pan-zoom/issues/71)), Upgrades deps\n- **v2.16** - Adds `onPan` and `onZoom` callbacks, Upgrade deps, Fixes boundaries feature\n- **v2.17** - Upgrades deps\n- **v2.18** - Introduces `toolbarProps.SVGAlignX` and `toolbarProps.SVGAlignY` props.  Adds alignment configuration in `fitToViewer(SVGAlignX = \"left\", SVGAlignY = \"top\")` method ([#120](https://github.com/chrvadala/react-svg-pan-zoom/pull/120)). Upgrades deps.\n- **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](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/migrate-from-v2-to-v3.md)**.\n- **v3.1** - Upgrades to storybook 5 and [transformation-matrix 2](https://github.com/chrvadala/transformation-matrix); Fixes some Babel configuration issues\n- **v3.2** - Upgrades deps\n- **v3.3** - Adds SVG viewbox prop support [#150](https://github.com/chrvadala/react-svg-pan-zoom/pull/150)\n- **v3.4** - Upgrades deps and increases code quality (fixing eslint warnings)\n- **v3.5** - Handles wheel event as passive [#158](https://github.com/chrvadala/react-svg-pan-zoom/pull/158), upgrades deps\n- **v3.6** - Adds some unit tests, Fixes [#161](https://github.com/chrvadala/react-svg-pan-zoom/issues/161), upgrades deps\n- **v3.7** - Adds some more unit tests, upgrades deps\n- **v3.8** - Adds cover option on `fitToViewer` method [#167](https://github.com/chrvadala/react-svg-pan-zoom/pull/167), adds `activeToolColor` property [#168](https://github.com/chrvadala/react-svg-pan-zoom/pull/168), upgrades deps\n- **v3.9** - Exports toolbar icons and buttons [#192](https://github.com/chrvadala/react-svg-pan-zoom/pull/192)\n- **3.10** - Upgrades deps; Migrates to React 17 and Storybook 6; Updates examples and docs to React hooks\n- **3.11** - Migrates from yarn to npm; Makes use of [chrvadala/github-actions](https://github.com/chrvadala/github-actions); Updates deps;\n- **3.12** - Migrates to gh-sponsor; Improves docs; Deprecates v1 migration guide; Upgrades deps;\n\n## Some projects using react-svg-pan-zoom\n- [**Learn Anything**](https://github.com/learn-anything/learn-anything)\n- [**React Planner**](https://github.com/cvdlab/react-planner)\n- [**Python extension for vscode**](https://github.com/microsoft/vscode-python)\n- [**Others...**](https://github.com/chrvadala/react-svg-pan-zoom/network/dependents)\n- Pull request your project!\n\n## Contributors\n- [chrvadala](https://github.com/chrvadala) (author)\n- [UtkuBelemir](https://github.com/UtkuBelemir)\n- [pellebjerkestrand](https://github.com/pellebjerkestrand)\n- [otake](https://github.com/otake)\n- [DmitriySpirit](https://github.com/DmitriySpirit)\n- [yozi-developer](https://github.com/yozi-developer)\n- [auroranil](https://github.com/auroranil)\n- [ahmedhosny](https://github.com/ahmedhosny)\n- [spcfran](https://github.com/spcfran)\n- [mariafronczak](https://github.com/mariafronczak)\n- [jakoblaegdsmand](https://github.com/jakoblaegdsmand)\n- [lionkeng](https://github.com/lionkeng)\n- [KQLYYY](https://github.com/KQLYYY)\n- [TimVanMourik](https://github.com/TimVanMourik)\n- [kheyse-oqton](https://github.com/kheyse-oqton)\n- [krnlde](https://github.com/krnlde)\n- [UnHumbleBen](https://github.com/UnHumbleBen)\n- [wolasss](https://github.com/wolasss)\n- [leweohlsen](https://github.com/leweohlsen)\n- [sroze](https://github.com/sroze)\n- [justin-hackin](https://github.com/justin-hackin)\n- [Hydroxycarbamide](https://github.com/Hydroxycarbamide)\n","readmeFilename":"README.md"}