ajainarayanan / React Pan Zoom
Licence: mit
Generic html wrapper for pan and zoom feature for react canvas like components
Stars: ✭ 31
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Pan Zoom
Panzoom
Universal pan and zoom library (DOM, SVG, Custom)
Stars: ✭ 1,003 (+3135.48%)
Mutual labels: zoom, pan
Tileview
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.
Stars: ✭ 1,447 (+4567.74%)
Mutual labels: zoom, pan
Chartjs Plugin Zoom
Zoom and pan plugin for Chart.js
Stars: ✭ 404 (+1203.23%)
Mutual labels: zoom, pan
Panzoom
A library for panning and zooming elements using CSS transforms 🔍
Stars: ✭ 1,593 (+5038.71%)
Mutual labels: zoom, pan
svg-pan-zoom-container
A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.
Stars: ✭ 31 (+0%)
Mutual labels: pan, zoom
React Svg Pan Zoom
👀 A React component that adds pan and zoom features to SVG
Stars: ✭ 569 (+1735.48%)
Mutual labels: zoom, pan
react-easy-panzoom
Wrapper to enable pan and zoom features for any React component
Stars: ✭ 69 (+122.58%)
Mutual labels: pan, zoom
Flutter advanced networkimage
flutter advanced network image provider
Stars: ✭ 282 (+809.68%)
Mutual labels: zoom, pan
ZoomMarker
A jQuery plugin for scrolling and zooming in and out of the image
Stars: ✭ 81 (+161.29%)
Mutual labels: pan, zoom
React Prismazoom
A pan and zoom component for React, using CSS transformations.
Stars: ✭ 29 (-6.45%)
Mutual labels: zoom, pan
Yeetgif
gif effects CLI. single binary, no dependencies. linux, osx, windows. #1 workplace productivity booster. #yeetgif #eggplant #golang
Stars: ✭ 467 (+1406.45%)
Mutual labels: zoom
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (+2200%)
Mutual labels: zoom
Zoomy
Zoomy is an easy to use pinch-to-zoom Android library
Stars: ✭ 842 (+2616.13%)
Mutual labels: zoom
Zoomlayout
2D zoom and pan behavior for View hierarchies, images, video streams, and much more, written in Kotlin for Android.
Stars: ✭ 688 (+2119.35%)
Mutual labels: pan
React Image Magnify
A responsive image zoom component designed for shopping sites.
Stars: ✭ 391 (+1161.29%)
Mutual labels: zoom
Zoomove
🔍 🎆 Enlarges the image with the mouse hover and move
Stars: ✭ 339 (+993.55%)
Mutual labels: zoom
React Pan & Zoom
A simple pan and zoom for canvas like elements in react.
Demo
Installation
> yarn add @ajainarayanan/react-pan-zoom
Usage
import ReactPanZoom from "@ajainarayanan/react-pan-zoom";
class MyComponent extends React.PureComponent {
public render() {
return (
<ReactPanZoom>
<img src="some/src/for/image.png" />
</ReactPanZoom>
);
}
}
Props
-
zoom
: Provide zoom level for the cavnas'ish element.1
by default -
dx
: Provide the initial x co-ordinate to pan the underlying element to be.0
by default -
dy
: Provide the initial y co-ordinate to pan the underlying element to be.0
by default
For more information on what dx
and dy
mean please refer here
(tx == dx and ty == dy)
.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].