# Viewer

## Features

This component works with three different mode selected through an attribute:

- With the tool pan the user can move the image dragging it inside the viewer
- With the tool zoom the user can scale the image through a point click or zoom a specified area
- With the tool none the user can interact with the SVG content and trigger browser events

## Additional Features

- Detect zoom performed through pinch and scroll (optional)
- Perform autopan when the mouse is close to the edge of the viewer (optional)
- Each callback function receives (x,y) coords mapped to the real SVG size
- Fully stateless
- Event info managed with lazy mode to ensure high performance
- ES6 syntax

## Props

- `width` – required – width of the viewer displayed on screen (if you want to omit this below)
- `height` – required – height of the viewer displayed on screen (if you want to omit this below)
- `background` – background of the viewer (default dark grey)
- `style` - CSS style of the viewer
- `specialKeys` - array of keys that in zoom mode switch zoom in and zoom out (default Win/Cmd, Ctrl)
- `detectPinch` - detect zoom operation performed trough pinch gesture or mouse scroll
- `detectAutoPan` - perform PAN if the mouse is on viewer border
- `SVGBackground` - background of the SVG (default white)
- `value` - value of the viewer (current point of view)
- `tool` - active tool ( one of `none`, `pan`, `zoom`, `zoom-in`, `zoom-out` )
- `onChange` - handler something changed `fn(viewerEvent)`
- `onClick` - handler click `fn(viewerEvent)`
- `onMouseUp` - handler mouseup `fn(viewerEvent)`
- `onMouseMove` - handler mousemove `fn(viewerEvent)`
- `onMouseDown` - handler mousedown `fn(viewerEvent)`

## ViewerEvent

- `SyntheticEvent originalEvent` - The original React event
- `object` - coordinate {x,y} of the event mapped to SVG coordinates
- `number x` - x coordinate of the event mapped to SVG coordinates
- `number y` - y coordinate of the event mapped to SVG coordinates
- `number scaleFactor` - zoom level
- `number translationX` - x delta from the viewer origin
- `number translationY` - y delta from the viewer origin

# Usage

See here a demo code

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

# Autosize

React SVG Pan Zoom requires `width` and `height` to works properly. If you need an autosized component you can get the dimensions of a wrapper element and pass them as properties to the child element through ReactDimension.