chrvadala/react-svg-pan-zoom chrvadala/react-svg-pan-zoom

  • Stars
    star
    677
  • Rank 66,694 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated 4 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
chrvadala/react-svg-pan-zoom
github

chrvadala

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-pan-zoom@3"></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
  • 3.11 - Migrates from yarn to npm; Makes use of chrvadala/github-actions; Updates deps;
  • 3.12 - Migrates to gh-sponsor; Improves docs; Deprecates v1 migration guide; Upgrades deps;

Some projects using react-svg-pan-zoom

Contributors

More Repositories

1

transformation-matrix

Javascript isomorphic 2D affine transformations written in ES6 syntax. Manipulate transformation matrices with this totally tested library!
JavaScript
360
star
2

node-ble

Bluetooth Low Energy (BLE) library written with pure Node.js (no bindings) - baked by Bluez via DBus
JavaScript
308
star
3

music-beat-detector

music-beat-detector is a library that analyzes a music stream and detects any beat. It can be used to control lights or any magic effect by the music wave.
JavaScript
254
star
4

awesome-protocols

Curated list of awesome technology protocols with a reference to official RFCs
28
star
5

create-music-stream

Creates a PCM 16 bit Little Endian Stream from a mp3 file or youtube video
JavaScript
24
star
6

potree-converter-docker

Potree Converter utility packed as Docker Container
Dockerfile
19
star
7

react-refactor

🔧 Convert your React Class Component to Functional Component and vice-versa
JavaScript
16
star
8

neopixel

Node.js library to control Adafruit NeoPixel based on ws2812 led family
C++
15
star
9

docker-compose-examples

💻 This project intends to collect common docker-compose use cases. Each example can be used as a boilerplate.
PHP
13
star
10

kafka-test-helper

Utility library that simplify testing of Node.js components that interacts with Kafka broker.
JavaScript
8
star
11

weather-station

Connector able to download weather data from an Oregon Scientific EMR211X station, leveraging on Bluetooth Low Energy connection
JavaScript
6
star
12

mqtt-dispatcher

MQTT dispatcher is a library that extends MQTT.js and allows to route incoming messages on a specific handler, according to defined routing rules.
JavaScript
6
star
13

biconnected-components

Find biconnected component in a graph using algorithm by John Hopcroft and Robert Tarjan
JavaScript
3
star
14

aggregate-fn

Aggregate fn is a tiny Javascript utility that groups together multiple async operations.
JavaScript
3
star
15

const-version

✨ A tiny command line tool that extract `package.json` version and generate `export const VERSION='...'` file. Useful when you want to package your software version.
JavaScript
3
star
16

tableauSolver

Prolog algorithm that applies the method of analytic tableaux and creates a graphical representation of a propositional tableau
Prolog
2
star
17

github-actions

Github actions that automates some common scenarios.
2
star
18

react-redux-boilerplate

😋 A suggested React + Redux projects structure.
JavaScript
2
star
19

aws-cloud-stacks

AWS CloudFormation stacks that speed-up projects development.
Shell
2
star
20

cisco-decrypt-docker

🙈 Docker container with Decoder for password encoding of Cisco VPN client
C
2
star
21

chrvadala.github.io

Hello, this is Christian Vadalà's website. Here you can find a list of open source projects, backed by React, Node.JS and AWS technologies.
JavaScript
1
star
22

react-stylerify

A browserify wrapper around react-styling
JavaScript
1
star
23

sudoku.go

🎲 Sudoku solver written in golang
Go
1
star
24

sliding-window-max

Given a stream of data, this algorithm returns (for every added value) the current max value.
JavaScript
1
star
25

setup-my-pc

setup-my-pc.sh is a simple script that configures personal computers, virtual machines and servers with some common tools. It fastify the setup of a new development environment.
Shell
1
star