Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/littlee/use-pan-zoom
react hook for panning & zooming element
https://github.com/littlee/use-pan-zoom
pan react react-hooks zoom
Last synced: 5 days ago
JSON representation
react hook for panning & zooming element
- Host: GitHub
- URL: https://github.com/littlee/use-pan-zoom
- Owner: littlee
- Created: 2020-04-16T09:47:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-25T08:28:20.000Z (about 3 years ago)
- Last Synced: 2024-10-04T06:19:25.970Z (about 1 month ago)
- Topics: pan, react, react-hooks, zoom
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-pan-zoom
React hook for panning & zooming element
## Install
```
npm i -S use-pan-zoom
```
## Usage
```js
import React from 'react';
import usePanZoom from 'use-pan-zoom';
const App = () => {
const { elemRef, style } = usePanZoom();
return (
);
};
```
## API
```js
const values = usePanZoom(options);
```
values: (Object)
- elemRef: (Function) a React Callback Ref https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
- style: (Object)
- x: (Number) x position
- y: (Number) y position
- scale: (Number) scale ratio
- setStyle: (Function) style setter
options: (Object)
- minScale: (Number) minimum scale, default `-Infinity`
- maxScale: (Number) maximum scale, default `Infinity`
- bounds: (Object: {x?: [Number, Number], y?: [Number, Number]} | Function: ({ scale }) => Object) element position bounds, default: `{ x: [-Infinity, Infinity], y: [-Infinity, Infinity] }`
- onPanStart: (Function(event)) pan start callback
- onPan: (Function(event)) panning callback
- onPanEnd: (Function(event)) pan end callback
- onZoomStart: (Function(event)) zoom start callback
- onZoom: (Function(event)) zooming callback
- onZoomEnd: (Function(event)) zoom end callback
## FAQ
- multiple refs integration
```js
const App = () => {
const myRef = useRef();
const { elemRef } = usePanZoom();
return (
{
myRef.current = node;
elemRef(node);
}}
/>
);
};
```
## Caveats
### calculate bounds based on the current scale
If bounds are calculated based on the current scale, use `scale` from parameters instead of `style.scale`, because `style` is a React State, the value could be staled until the next effect
e.g. limit pan zoom inside parentElement
```js
usePanZoom({
bounds: ({ scale }) => {
return {
x: [parent.width - element.width * scale, 0],
y: [parent.height - element.height * scale, 0]
};
}
});
```