Package Health Score

78 / 100

security
No known security issues
popularity
Recognized
maintenance
Sustainable
community
Active

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
3.13.1	\|	08/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.12.1	\|	02/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.11.0	\|	01/2022	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.18.0	\|	07/2018		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.6.5	\|	09/2016		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Recognized

Weekly Downloads (77,924)

GitHub Stars: 681
Forks: 126
Contributors: 30

Direct Usage Popularity

The npm package react-svg-pan-zoom receives a total of 77,924 downloads a week. As such, we scored react-svg-pan-zoom popularity level to be Recognized.

Based on project statistics from the GitHub repository for the npm package react-svg-pan-zoom, we found that it has been starred 681 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Active

Readme.md: Yes
Contributing.md: No
Code of Conduct: Yes
Contributors: 30
Funding: Yes

With more than 10 contributors for the react-svg-pan-zoom repository, this is possibly a sign for a growing and inviting community.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 34
Open PR: 6
Last Release: 3 months ago
Last Commit: 3 months ago

Further analysis of the maintenance status of react-svg-pan-zoom based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that react-svg-pan-zoom demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 8 years
Dependencies: 2 Direct
Versions: 74
Install Size: 1.02 MB
Dist-tags: 1
# of Files: 133
Maintainers: 1
TS Typings: Yes

react-svg-pan-zoom has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

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.

Live Demo

available at https://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

Usage examples

Basic - Basic usage of ``.
Uncontrolled Component - Basic usage of ``.
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 component and makes 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

react-svg-pan-zoom dependencies

prop-types transformation-matrix

FAQs

What is react-svg-pan-zoom?

A React component that adds pan and zoom features to SVG. Visit Snyk Advisor to see a full health score report for react-svg-pan-zoom, including popularity, security, maintenance & community analysis.

Is react-svg-pan-zoom popular?

The npm package react-svg-pan-zoom receives a total of 77,924 weekly downloads. As such, react-svg-pan-zoom popularity was classified as a recognized. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-svg-pan-zoom well maintained?

We found indications that react-svg-pan-zoom maintenance is sustainable demonstrating some project activity. We saw a total of 30 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is react-svg-pan-zoom safe to use?

The npm package react-svg-pan-zoom was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 16 November-2024, at 08:23 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP