https://github.com/dherault/react-pan-and-zoom
A React component to pan and zoom using a trackpad, mouse or touchscreen
https://github.com/dherault/react-pan-and-zoom
Last synced: 6 months ago
JSON representation
A React component to pan and zoom using a trackpad, mouse or touchscreen
- Host: GitHub
- URL: https://github.com/dherault/react-pan-and-zoom
- Owner: dherault
- Created: 2024-07-17T18:02:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-11T17:13:41.000Z (over 1 year ago)
- Last Synced: 2025-04-06T00:46:46.260Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://react-pan-and-zoom.web.app
- Size: 5.84 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React pan and zoom
A React component to pan and zoom using a trackpad, mouse or touchscreen.
## Demo
[Demo](https://react-pan-and-zoom.web.app/).
## Introduction
This package differs from other packages in that it detects the mouse type and using a trackpad you can pan with two fingers and zoom with a pinch.
## Installation
```bash
npm install --save react-pan-and-zoom
```
## Usage
```jsx
import { PanZoomProvider, PanZoom, useSafeGestures } from 'react-pan-and-zoom'
function App() {
// Disable swiping the history back and forward with two fingers
useSafeGestures()
return (
Pannable and zoomable content goes here
)
}
```
You can also import a hook called `usePanZoom` to access the pan and zoom state inside `PanZoomProvider`.
## Props
### PanZoomProvider
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| forceMouseType | 'touchpad' or 'touchscreen' or 'mouse' | automatic | Force a mouse type |
| initialPan | Xy | { x: 0, y: 0 } | The initial pan value |
| initialZoom | number | 1 | The initial zoom value |
| isPanBounded | boolean | true | Whether to bound panning |
| panBoundPadding | Padding | { top: 0, bottom: 0, left: 0, right: 0 } | Padding for panning |
| panZoomDelay | number | 300 | The delay in ms for the pan to adjust after a zoom |
| isZoomBounded | boolean | true | Whether to bound zooming |
| minZoom | number | 0.5 | The minimum zoom value |
| maxZoom | number | 2 | The maximum zoom value |
| zoomStrength | number | 0.05 | The strength factor of the zoom |
| centerOnMount | boolean | true | Whether to center on mount if the content is smaller than the container |
| centerOnMountDelay | number | 3 * 1000 / 60 | How long to way on mount before centering the content |
| onChange | (pan: Xy, zoom: number) => void | undefined | The callback when the pan or zoom changes |
## PanZoom
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| containerClassName | string | empty string | The class name of the container |
| containerStyle | CSSProperties | empty object | The style of the container |
| contentClassName | string | empty string | The class name of the content |
| contentStyle | CSSProperties | empty object | The style of the content |
## License
MIT License
## Contributing
Yes please!