Installations
npm install react-quick-pinch-zoomDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
18.18.0
NPM Version
9.6.7
Score
91.5
Supply Chain
86.6
Quality
75.6
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (88.39%)
TypeScript (10.45%)
CSS (0.99%)
HTML (0.18%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
4,290,803
Last Day
6,269
Last Week
26,277
Last Month
102,385
Last Year
913,109
GitHub Statistics
319 Stars
161 Commits
48 Forks
3 Watchers
1 Branches
10 Contributors
Updated on Feb 20, 2025
Bundle Size
16.80 kB
Minified
5.04 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
5.1.0
Package Id
react-quick-pinch-zoom@5.1.0
Unpacked Size
81.48 kB
Size
16.33 kB
File Count
23
NPM Version
9.6.7
Node Version
18.18.0
Published on
Nov 21, 2023
Total Downloads
Cumulative downloads
Total Downloads
4,290,803
Last Day
6.5%
6,269
Compared to previous day
Last Week
-6.7%
26,277
Compared to previous week
Last Month
34%
102,385
Compared to previous month
Last Year
14%
913,109
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
3
react-quick-pinch-zoom
A react component that lets you zooming and dragging on any DOM element using multi-touch gestures on mobile devices and mouse-events\wheel on desktop devices. Based on this module manuelstofer/pinchzoom
Component features:
- 🔮 Simple. Easy to use;
- 🍎 It works with mobile touch gestures and desktop mouse events;
- ⚡ Fast, 60 FPS on mobile devices.
Links
Install
1npm i --save react-quick-pinch-zoom
or
1yarn add react-quick-pinch-zoom
Screenshots
Usage
1import React, { useCallback, useRef } from "react"; 2import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom"; 3 4const IMG_URL = 5 "https://user-images.githubusercontent.com/4661784/" + 6 "56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png"; 7 8export const App = () => { 9 const imgRef = useRef(); 10 const onUpdate = useCallback(({ x, y, scale }) => { 11 const { current: img } = imgRef; 12 13 if (img) { 14 const value = make3dTransformValue({ x, y, scale }); 15 16 img.style.setProperty("transform", value); 17 } 18 }, []); 19 20 return ( 21 <QuickPinchZoom onUpdate={onUpdate}> 22 <img ref={imgRef} src={IMG_URL} /> 23 </QuickPinchZoom> 24 ); 25};
License
MIT © retyui
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
Found 6/19 approved changesets -- score normalized to 3
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/nodejs.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/retyui/react-quick-pinch-zoom/nodejs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/retyui/react-quick-pinch-zoom/nodejs.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
Reason
29 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Score
2.5
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-quick-pinch-zoom
react-swipe-quick-pinch-zoom
A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
react-quick-pinch-zoom-ssr
A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
react-quick-pinch-zoom-with-swipe
A react component that providing multi-touch gestures for zooming and dragging on any DOM element.