GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → chrvadala → React Svg Pan Zoom

chrvadala / React Svg Pan Zoom

Licence: mit
👀 A React component that adds pan and zoom features to SVG

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactwebsvgfrontendwebcomponentszoompan

Projects that are alternatives of or similar to React Svg Pan Zoom

Flutter advanced networkimage
flutter advanced network image provider
Stars: ✭ 282 (-50.44%)
Mutual labels:  svg, zoom, pan
Panzoom
A library for panning and zooming elements using CSS transforms 🔍
Stars: ✭ 1,593 (+179.96%)
Mutual labels:  svg, zoom, pan
Panzoom
Universal pan and zoom library (DOM, SVG, Custom)
Stars: ✭ 1,003 (+76.27%)
Mutual labels:  svg, zoom, pan
Elementx
⚡️ Functionally create DOM elements and compose them to a tree quickly
Stars: ✭ 62 (-89.1%)
Mutual labels:  svg, frontend
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+7949.56%)
Mutual labels:  webcomponents, frontend
Bounty
Javascript and SVG odometer effect library with motion blur
Stars: ✭ 724 (+27.24%)
Mutual labels:  svg, webcomponents
Panandzoom
Pan and zoom control for Avalonia.
Stars: ✭ 159 (-72.06%)
Mutual labels:  zoom, pan
Snap.svg.zpd
A zoom/pan/drag/rotate plugin for Snap.svg (useful for view only)
Stars: ✭ 119 (-79.09%)
Mutual labels:  svg, zoom
Omatsuri
PWA with 12 open source frontend focused tools
Stars: ✭ 1,131 (+98.77%)
Mutual labels:  svg, frontend
svg-pan-zoom-container
A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.
Stars: ✭ 31 (-94.55%)
Mutual labels:  pan, zoom
core
Renderer for tldraw and maybe you, too.
Stars: ✭ 418 (-26.54%)
Mutual labels:  pan, zoom
ZoomMarker
A jQuery plugin for scrolling and zooming in and out of the image
Stars: ✭ 81 (-85.76%)
Mutual labels:  pan, zoom
Frontend
🍭 Frontend for Home Assistant
Stars: ✭ 1,366 (+140.07%)
Mutual labels:  webcomponents, frontend
Builder
Drag and drop page building using your code components
Stars: ✭ 1,281 (+125.13%)
Mutual labels:  webcomponents, frontend
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-96.13%)
Mutual labels:  webcomponents, frontend
Chartjs Plugin Zoom
Zoom and pan plugin for Chart.js
Stars: ✭ 404 (-29%)
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 (+154.31%)
Mutual labels:  zoom, pan
Easypz
Easy Pan and Zoom JS Library
Stars: ✭ 125 (-78.03%)
Mutual labels:  zoom, pan
react-easy-panzoom
Wrapper to enable pan and zoom features for any React component
Stars: ✭ 69 (-87.87%)
Mutual labels:  pan, zoom
Snuggsi
snuggsi ツ - Easy Custom Elements in ~1kB
Stars: ✭ 288 (-49.38%)
Mutual labels:  webcomponents, frontend
View All Similar Projects ➔

react-svg-pan-zoom

react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a small space.

chrvadala Test npm Downloads Donate

react-svg-pan-zoom

Live Demo

available at http://chrvadala.github.io/react-svg-pan-zoom/

Features

This component can work in four different modes depending on the selected tool:

  • With the tool pan the user can move the image and drag it around within the viewer, but can't interact with SVG child elements.
  • With the tool zoom the user can scale the image either with a point click or selecting a region to zoom the specified area, but can't interact with SVG child elements.
  • With the tool none the user can interact with SVG child elements and trigger events.
  • With the tool auto the user can interact with SVG child elements, perform pan (dragging the image), zoom in (double click), zoom out (double click + shift).

Documentation

Install

NPM

npm install --save react-svg-pan-zoom

YARN

yarn add react-svg-pan-zoom

UMD

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

Usage examples

Changelog

  • v2.0 - Project refactor. Follow this guide for migration instructions.
  • v2.1 - Adds setPointOnViewerCenter, reset methods and className, style props
  • v2.2 - Introduces tool auto, improves default toolbar
  • v2.3 - Adds touch events support
  • v2.4 - Adds es:next support, deploy new website
  • v2.5 - Adds preventPanOutside and scaleFactor props
  • v2.6 - Introduces transformation-matrix that reduces bundle size thanks to three shaking, Fixes pan limit behaviour, Replaces toolbar links with buttons, minor improvements
  • v2.7 - Adds miniature feature, Adds PropTypes support
  • v2.8 - Adds storybook demo, Remove bower support, Adds pinch to zoom feature, Fixes miniature size
  • v2.9 - Reinvents miniature and introduce props miniatureBackground, miniatureHeight, Minor improvements & fix
  • v2.10 - Introduces prop disableDoubleClickZoomWithToolAuto
  • v2.11 - Improves docs, updates deps
  • v2.12 - Exports miniature to allow customization
  • v2.13 - Fixes resize issues (#58), Upgrades deps
  • v2.14 - Introduces prop scaleFactorOnWheel, Upgrades deps
  • v2.15 - Improves autopan feature (#71), adds scaleFactorMax, scaleFactorMin props (#71), Upgrades deps
  • v2.16 - Adds onPan and onZoom callbacks, Upgrade deps, Fixes boundaries feature
  • v2.17 - Upgrades deps
  • v2.18 - Introduces toolbarProps.SVGAlignX and toolbarProps.SVGAlignY props. Adds alignment configuration in fitToViewer(SVGAlignX = "left", SVGAlignY = "top") method (#120). Upgrades deps.
  • v3.0 - Upgrades to babel 7 and storybook 4; Introduces <UncontrolledReactSVGPanZoom /> component and makes <ReactSVGPanZoom> a stateless component (except for some optimizations); Moves props related to miniature and toolbar, respectively into the miniatureProp and toolbarProp props. Migration guide is available here.
  • v3.1 - Upgrades to storybook 5 and transformation-matrix 2; Fixes some Babel configuration issues
  • v3.2 - Upgrades deps
  • v3.3 - Adds SVG viewbox prop support #150
  • v3.4 - Upgrades deps and increases code quality (fixing eslint warnings)
  • v3.5 - Handles wheel event as passive #158, upgrades deps
  • v3.6 - Adds some unit tests, Fixes #161, upgrades deps
  • v3.7 - Adds some more unit tests, upgrades deps
  • v3.8 - Adds cover option on fitToViewer method #167, adds activeToolColor property #168, upgrades deps
  • v3.9 - Exports toolbar icons and buttons #192
  • 3.10 - Upgrades deps; Migrates to React 17 and Storybook 6; Updates examples and docs to React hooks

Some projects using react-svg-pan-zoom

Contributors

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].