react-svg-pan-zoom

react-svg-pan-zoom

A react component that adds pan and zoom features to SVG

Installation

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

Usage

SVGPanZoom Viewer

import React from 'react';
import ReactDOM from 'react-dom';
import {Viewer, ViewerHelper, TOOL_NONE, TOOL_PAN, TOOL_ZOOM} from 'react-svg-pan-zoom';

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ViewerHelper.getDefaultValue(),
      tool: TOOL_PAN      //you can change this state with TOOL_NONE or TOOL_ZOOM
    };
  }

  handleChange(event) {
    this.setState({value: event.value});
  }

  render() {
    return (
      <div>
        <Viewer viewerWidth={400} viewerHeight={400} artboardWidth={800} artboardHeight={800}
          value={this.state.value} onChange={event => this.handleChange(event)}
          tool={this.state.tool}>

          <rect x="30" y="50" width="100" height="70" fill="black"/>
          <circle cx="210" cy="120" r="50" fill="blue"/>

        </Viewer>
      </div>
    );
  }
}

Concepts

• viewer - <div> that contains a part of drawing
• artboard - canvas that contains the drawing

Props

• viewerWidth – required – width of the viewer displayed on screen
• viewerHeight – required – height of the viewer displayed on screen
• viewerBackground – background of the viewer
• artboardWidth – required – width of the artboard (size of the original vector image)
• artboardHeight – required – height of the artboard (size of the original vector image)
• artboardBackground - background of the artboard
• value - value of the viewer (current point of view)
• style - CSS style of the SVG tag
• onChange - handler something changed
• onClick - handler click
• onMouseMove - handler mousemove
• tool - current active tool (TOOL_NONE, TOOL_PAN, TOOL_ZOOM)