react-drag-n-zoom

Drag and zoom your SVGs

What does it?

react-drag-n-zoom allows you to drag, zoom, expand, center your SVGs in the web.

Look at the amazing demo:

React-Drag-N-Zoom DEMO

Install

npm install react-drag-n-zoom

or over yarn:

yarn add react-drag-n-zoom

How to Use

First import it:

import Viewer from 'react-drag-n-zoom'

Add the React Component for example in the render method (taken from ./example)

render () {
  return (
    <Viewer
      ref={ref => (this.viewer = ref)} // (see below for methods)
      zoomFullOnInit={true}
      width="100"
      height="100"
      viewBox="0 0 100 100"
    >
     <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="3"
        fill="red"
      />
    </Viewer>
  )
}

Viewer accepts as children the content of SVGs. The SVG surrounding the circle Element above, will be added automatically by react-drag-n-zoom

Warning: Make sure width, height and viewBox are supplied to Viewer!

Methods

• this.viewer.resetZoom() - resets zoom and centers SVG at scale 1
• this.viewer.zoomIn(value = 1.2) - zooms in SVG
• this.viewer.zoomOut(value = 0.8) - zoom out of SVG
• this.viewer.zoomFull() - expands SVG to fill screen
• this.viewer.zoomTo(area) - zoom to specific area area equals e.g. { top: 655, left: 570, width: 80, height: 50}

Features

• Extensive Functions
• Supports every SVG
• Uses Smooth Transitions
• Cross-Browser Compatibility - e.g. Firefox & Chrome differ in how they implement SVGs. That's why, react-drag-n-zoom will differ them too and apply the right methods for the specific browser.