Best library for pinch to zoom + drag to pan
Does anybody know a good library for pinch to zoom + drag to pan?
Things I've tried:
- I've heard Theo talk about useGesture() before and this seems good, but the docs are.... minimal and their only pinch example doesn't run anymore: https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom
- I did some googling and also found react-zoom-pan-pinch, but it has dependency issues with react 18 https://www.npmjs.com/package/react-zoom-pan-pinch
CodeSandbox
gesture-card-zoom - CodeSandbox
gesture-card-zoom using @react-spring/web, @use-gesture/react, react, react-dom, react-scripts
npm
react-zoom-pan-pinch
Zoom and pan html elements in easy way. Latest version: 2.1.3, last published: a year ago. Start using react-zoom-pan-pinch in your project by running
npm i react-zoom-pan-pinch. There are 144 other projects in the npm registry using react-zoom-pan-pinch.9 Replies
I'm using use-gesture here https://github.com/bdsqqq/minesweeper/blob/main/components/GestureContainer.tsx if it helps
GitHub
minesweeper/GestureContainer.tsx at main · bdsqqq/minesweeper
Contribute to bdsqqq/minesweeper development by creating an account on GitHub.
Let me know if react-zoom-pan-pinch is better because I might adopt it myself lol
sorry. i was travelling yesterday
but im already using useGesture in my app, but its pretty.... low level
it gives fantastic primitives, but other than that you really have to build the thing yourself
it looks like you found the same example i did which works really well..... except that it just uses straight translate3d and doesnt interact with scroll at all
i wanted mine to work with the standard scroll bars which ended up being really tricky
i might put this in a gist or something sometime later but this is what i came up with
had to remember a lot of geometry / algebra for it so i hope its useful 😛
@bedesqui
Ohhhh thats very helpful, did you manage to make the pinch zoom in the direction the user is inching instaead of the center?
yeah lol
that took
forevvvvvvvverrrrr
and a lot of math on an airplane
that i didnt remember how to do