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.
available at http://TimVanMourik.github.io/react-svg-diagram/
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).
npm install --save react-svg-diagram
yarn add react-svg-diagram
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-diagram@0"></script>
- 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.
- v0.1 -
- v0.0 -
- GiraffeTools
- Pull request your project!
- TimVanMourik (author)