npmpackage.info

Gathering detailed insights and metrics for @kokarn/react-zoom-pan-pinch

@kokarn/react-zoom-pan-pinch

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>

2.1.5

1,539

MIT

TypeScript

7.78 kB

109,510 3.4

Installations

npm install @kokarn/react-zoom-pan-pinch

Pull Requests

Open

7

Total

173

Closed

70

Merged

96

Issues

Open

122

Total

342

Closed

220

Releases

v3.6.1

Published on 01 Jul 2024

v3.6.0

Published on 27 Jun 2024

v3.5.1

Published on 23 Jun 2024

v3.5.0

Published on 21 Jun 2024

v3.4.4

Published on 28 Mar 2024

v3.4.3

Published on 26 Feb 2024

View all 22 releases

Developer

prc5

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=8

Typescript Support

Yes

Node Version

16.13.2

NPM Version

8.3.1 Statistics

1,539 Stars

407 Commits

274 Forks

10 Watching

8 Branches

44 Contributors

Updated on 26 Nov 2024

Bundle Size

24.60 kB

Minified

7.78 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (83.28%)

MDX (14.26%)

JavaScript (1.18%)

CSS (1.16%)

HTML (0.12%)

Total Downloads

Cumulative downloads

Total Downloads

109,510

Last day

-33.8%

Compared to previous day

Last week

-15.1%

286

Compared to previous week

Last month

-31.9%

2,441

Compared to previous month

Last year

-28.2%

33,271

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-dom

Dev Dependencies

Versions

🖼 React Zoom Pan Pinch

Super fast and light react npm package for zooming, panning and pinching html elements in easy way

Sources

Demo
Docs

Key Features

🚀 Fast and easy to use
🏭 Light, without external dependencies
💎 Mobile gestures, touchpad gestures and desktop mouse events support
🎁 Powerful context usage, which gives you a lot of freedom
🔧 Highly customizable
👑 Animations and Utils to create own tools
🔮 Advanced hooks and components

Try other BetterTyped projects

Do you like this library? Try out other projects

⚡Hyper Fetch - Fetching and realtime data exchange framework.

Installation

1npm install --save react-zoom-pan-pinch
2or
3yarn add react-zoom-pan-pinch

Examples

1import React, { Component } from "react";
2
3import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
4
5const Example = () => {
6  return (
7    <TransformWrapper>
8      <TransformComponent>
9        <img src="image.jpg" alt="test" />
10      </TransformComponent>
11    </TransformWrapper>
12  );
13};

1import React, { Component } from "react";
2
3import {
4  TransformWrapper,
5  TransformComponent,
6  useControls,
7} from "react-zoom-pan-pinch";
8
9const Controls = () => {
10  const { zoomIn, zoomOut, resetTransform } = useControls();
11
12  return (
13    <div className="tools">
14      <button onClick={() => zoomIn()}>+</button>
15      <button onClick={() => zoomOut()}>-</button>
16      <button onClick={() => resetTransform()}>x</button>
17    </div>
18  );
19};
20
21const Example = () => {
22  return (
23    <TransformWrapper
24      initialScale={1}
25      initialPositionX={200}
26      initialPositionY={100}
27    >
28      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
29        <>
30          <Controls />
31          <TransformComponent>
32            <img src="image.jpg" alt="test" />
33            <div>Example text</div>
34          </TransformComponent>
35        </>
36      )}
37    </TransformWrapper>
38  );
39};

License

MIT © prc5

Help me keep working on this project ❤️

Become a Sponsor on GitHub

💖 Our sponsors

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.

10

License

Determines if the project has defined a license.

6

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

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

0

CII-Best-Practices

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

0

Pinned-Dependencies

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

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.4

/10

Last Scanned on 2024-11-18

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