Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-zoom-pan-pinch
Advanced tools
react-zoom-pan-pinch - npm Package Compare versions
Comparing version 3.4.3 to 3.4.4
| { | ||
| "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> |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.63%
620940
- Lines of code
- increased by0.43%
4242
- Number of lines in readme file
- increased by15.61%
200
No dependency changes