UNPKG

react-pan-zoom-hoc

Version:

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

43 lines (26 loc) 1.08 kB
# 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; }