npmpackage.info

Gathering detailed insights and metrics for react-quick-pinch-zoom

Other packages similar to react-quick-pinch-zoom

react-swipe-quick-pinch-zoom

4.2.1

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.

react-quick-pinch-zoom-ssr

3.0.0

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.

react-quick-pinch-zoom-with-swipe

4.2.0

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.

Gathering detailed insights and metrics for react-quick-pinch-zoom

react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.

5.1.0

319

JavaScript

5.04 kB

4,290,803 2.5

Installations

npm install react-quick-pinch-zoom

Developer Guide

BETA

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

Pull Requests

Open

0

Total

41

Closed

15

Merged

26

Issues

Open

8

Total

49

Closed

41

Releases

5.1.0

Updated on Nov 21, 2023

5.0.0

Updated on Oct 04, 2023

4.9.0

Updated on May 22, 2023

4.8.0

Updated on May 16, 2023

4.7.0

Updated on May 16, 2023

Old releases: 4.x, 3.x, 2.x, 1.x

4.6.0

Updated on May 16, 2023

View All 6 releases

Contributors

Unable to fetch Contributors

View All 10 Contributors

Languages

JavaScript

TypeScript

CSS

HTML

JavaScript (88.39%)

TypeScript (10.45%)

CSS (0.99%)

HTML (0.18%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

retyui

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

Bundlephobia

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

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

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.

Install

1npm i --save react-quick-pinch-zoom

1yarn add react-quick-pinch-zoom

Screenshots

Video...

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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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 More

Other packages similar to react-quick-pinch-zoom

Other packages similar to react-quick-pinch-zoom

react-quick-pinch-zoom

Installations

Developer Guide

Yes

CommonJS

18.18.0

9.6.7

Score

Pull Requests

0

41

15

26

Issues

8

49

41

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

16.80 kB

5.04 kB

Maintainers

Package Meta Information

Total Downloads

4,290,803

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-quick-pinch-zoom

Component features:

Links

Install

Screenshots

Usage

License

10

10

3

0

0

0

0

0

0

0

0

0

0

2.5

/10