usePinch without react-spring?

[bstro]

Hi there, trying to make a quick-and-dirty tech demo with a pretty tight deadline. I'm trying to build a UI that lets me resize images with a pinch gesture on mobile devices. usePinch looks really promising. I have no need for transitions and am wondering how this usePinch example might be rewritten without the react-spring dependency. Is this possible? It's not super clear to me since I am not very familiar with react-spring.

Thanks!

[dbismut]

Hi! Sure. react-spring is merely used to animate values outside of react render cycle. Any other animation lib would work, but you could also do something like:

const [x, setX] = useState(0)
const bind = useDrag(({ offset: [x] }) => {
  setX(x)
})

return <div {...bind()} style={{ transform: `translateX(${x}px)` }} />

Note that I would not recommend to do this as it basically re-rerenders the component on every event frame: it's not a major issue with a single div but you'll quickly get into perf issues with a more elaborated situation.

For animation libs, you can have a look at gsap, animate.js. You'll have to manually animate the element as in:

const bind = useDrag(({ target, offset: [x] }) => {
  gsap.set(currentTarget, { x })
})

return <div {...bind()} />

gsap has a useReact hook to make sure effects are cleaned up properly so you should probably use it when performing animations.

[bstro]

Thank you! Super helpful!