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;
}