🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-zoom-pan-pinch

Package Overview
Dependencies
Maintainers
1
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-zoom-pan-pinch - npm Package Compare versions

Comparing version

3.4.3
to
3.4.4

2

package.json
{
"name": "react-zoom-pan-pinch",
"version": "3.4.3",
"version": "3.4.4",
"description": "Zoom and pan html elements in easy way",

@@ -5,0 +5,0 @@ "author": "prc5",

143

README.md

@@ -39,5 +39,2 @@ # 🖼 React Zoom Pan Pinch

Do you like this library? Try out other projects
**[⚡Hyper Fetch](https://github.com/BetterTyped/hyper-fetch)**
#### Sources

@@ -48,2 +45,18 @@

<p align="center">
<a href="https://github.com/sponsors/prc5?tier=platinum">
<picture>
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Platinum.png" alt="Premium sponsor banner"/>
</picture>
</a>
</p>
<p align="center">
<a href="https://github.com/sponsors/prc5?tier=Platinum">
<picture>
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/platinum/sponsorkit/sponsors.svg" alt="Premium sponsor banner"/>
</picture>
</a>
</p>
## Key Features

@@ -59,6 +72,13 @@

## Help me keep working on this project ❤️
## Try other BetterTyped projects
- [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)
Do you like this library? Try out other projects
<a href="https://github.com/BetterTyped/hyper-fetch">
<img width="200px" src="https://raw.githubusercontent.com/BetterTyped/hyper-fetch/main/.github/assets/readme.png" alt="Hyper Fetch" />
</a>
**[⚡Hyper Fetch](https://github.com/BetterTyped/hyper-fetch)** - Fetching and
realtime data exchange framework.
---

@@ -74,2 +94,18 @@

<p align="center">
<a href="https://github.com/sponsors/prc5?tier=Gold">
<picture>
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Gold.png" alt="Premium sponsor banner"/>
</picture>
</a>
</p>
<p align="center">
<a href="https://github.com/sponsors/prc5?tier=gold">
<picture>
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/gold/sponsorkit/sponsors.svg" alt="Premium sponsor banner"/>
</picture>
</a>
</p>
## Examples

@@ -98,4 +134,20 @@

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import {
TransformWrapper,
TransformComponent,
useControls,
} from "react-zoom-pan-pinch";
const Controls = () => {
const { zoomIn, zoomOut, resetTransform } = useControls();
return (
<div className="tools">
<button onClick={() => zoomIn()}>+</button>
<button onClick={() => zoomOut()}>-</button>
<button onClick={() => resetTransform()}>x</button>
</div>
);
};
const Example = () => {

@@ -109,8 +161,4 @@ return (

{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
<React.Fragment>
<div className="tools">
<button onClick={() => zoomIn()}>+</button>
<button onClick={() => zoomOut()}>-</button>
<button onClick={() => resetTransform()}>x</button>
</div>
<>
<Controls />
<TransformComponent>

@@ -120,3 +168,3 @@ <img src="image.jpg" alt="test" />

</TransformComponent>
</React.Fragment>
</>
)}

@@ -128,53 +176,32 @@ </TransformWrapper>

or
<p align="center">
<a href="https://github.com/sponsors/prc5?tier=Silver">
<picture>
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Silver.png" alt="Premium sponsor banner" />
</picture>
</a>
</p>
```tsx
import React, { useRef } from "react";
import {
TransformWrapper,
TransformComponent,
ReactZoomPanPinchRef,
} from "react-zoom-pan-pinch";
<p align="center">
<a href="https://github.com/sponsors/prc5?tier=Silver">
<picture>
<img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/silver/sponsorkit/sponsors.svg" alt="Premium sponsor banner" />
</picture>
</a>
</p>
const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
<>
<button onClick={() => zoomIn()}>+</button>
<button onClick={() => zoomOut()}>-</button>
<button onClick={() => resetTransform()}>x</button>
</>
);
## License
const Component = () => {
const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);
MIT © [prc5](https://github.com/prc5)
const zoomToImage = () => {
if (transformComponentRef.current) {
const { zoomToElement } = transformComponentRef.current;
zoomToElement("imgExample");
}
};
## Help me keep working on this project ❤️
return (
<TransformWrapper
initialScale={1}
initialPositionX={200}
initialPositionY={100}
ref={transformComponentRef}
>
{(utils) => (
<React.Fragment>
<Controls {...utils} />
<TransformComponent>
<img src="image.jpg" alt="test" id="imgExample" />
<div onClick={zoomToImage}>Example text</div>
</TransformComponent>
</React.Fragment>
)}
</TransformWrapper>
);
};
```
- [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)
## License
## 💖 Our sponsors
MIT © [prc5](https://github.com/prc5)
<p align="center">
<a href="https://github.com/sponsors/prc5">
<img src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/other/sponsorkit/sponsors.svg?raw=true" alt="My Sponsors" />
</a>
</p>
dist/index.cjs.js

Sorry, the diff of this file is too big to display

dist/index.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/index.esm.js

Sorry, the diff of this file is too big to display

dist/index.esm.js.map

Sorry, the diff of this file is not supported yet