react-pan-zoom-hoc

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