react-svg-diagram v0.0.0

react-svg-diagram

react-svg-diagram is a React component that allows you to build diagrams in SVG format on top of a canvas in with pan and zoom features.

Live Demo

available at http://TimVanMourik.github.io/react-svg-diagram/

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

• Getting Started
• Props
• Methods
• API
• Autosizer viewer
• SVG dynamically loaded

Install

NPM

npm install --save react-svg-diagram

YARN

yarn add react-svg-diagram

UMD

<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-diagram@0"></script>

Usage examples

• Basic - Basic usage of <ReactSVGPanZoom>.
• Uncontrolled Component - Basic usage of <UncontrolledReactSVGPanZoom>.
• Advanced usage - Complex usage of <ReactSVGPanZoom> that uses some advanced features.
• JSFiddle - This is a JSFiddle demo that uses UMD bundle.
• CodeSandbox - This is a CodeSandbox demo.

Changelog

• v0.1 -
• v0.0 -

Some projects using react-svg-diagram

• GiraffeTools
• Pull request your project!

Contributors

• TimVanMourik (author)