react-easy-panzoom
Advanced tools
🚧 Please be advised that this library is currently under construction and might change quickly 🚧
Wrapper to enable pan and zoom features for any React component
react-panzoom requires React 16 or later.
Using npm:
npm install --save react-easy-panzoom
Using yarn:
yarn add react-easy-panzoom
import PanZoom from 'react-easy-panzoom'
// ...
render() {
return (
<PanZoom>
{ 'This content can be panned and zoomed' }
</PanZoom>
)
}
| Name | Type | Default | Description |
|---|---|---|---|
| autoCenter | bool | false | Auto-center the view when mounting |
| autoCenterZoomLevel | number | Specify the initial zoom level for auto-center | |
| zoomSpeed | number | 1 | Sets the zoom speed |
| doubleZoomSpeed | number | 1.75 | Sets the zoom speed for double click |
| disabled | bool | false | Disable pan and zoom |
| onPanStart | func | Fired on pan start | |
| onPan | func | Fired on pan | |
| onPanEnd | func | Fired on pan end | |
| style | object | Override the inline-styles of the root element |
The files included in this repository are licensed under the MIT license.
FAQs
Wrapper to enable pan and zoom for any React component
The npm package react-easy-panzoom receives a total of 6,337 weekly downloads. As such, react-easy-panzoom popularity was classified as popular.
We found that react-easy-panzoom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.