# React Pan and Zoom HOC

This is a HOC to make your beautiful React components pannable and zoomable by mouse.

## Installation

Install it like any other npm package:

#### With NPM:

    npm install react-pan-zoom-hoc

#### With Yarn:

    yarn add react-pan-zoom-hoc

## Usage

To use the component, just import it like so:

    import withPanAndZoom from 'react-pan-zoom-hoc'

And then wrap your component:

    withPanAndZoom(*Your component*);

## Props

When wrapped your component will get some additional props.
| Prop | optional? | type | default value| about
|--|--|--|--|--|
| state | yes | [PanZoomConfig, (PanZoomConfig) => void] | undefined | Is a state for the pan and zoom from parent.
| onChange | yes | (PanZoomConfig) => void | undefined | Is called when pan or zoom values change.
|ResetButton| yes | JSX.Element | undefined | Button element for resetbutton. Does only work if state prop is not set.

\*The **_PanZoomConfig_** type looks like:\*

    {
        x: number;
        y: number;
        scale: number;
    }