Pragmatically set value of X

[sami616]

Hi, i'm using this lib to track the x value of an element when it is dragged. is there currently any way of me pragmatically setting this value for example when the window is resized?

Sami.

[dbismut]

Hey @sami616, this is almost the same question as #54 so the answer is almost the same: you need to use temp. If you have a codesandbox set up I can quickly show you how it's done.

[sami616]

HI @dbismut i followed an example and got to this point which is working. However i don't care about the y values, could this be done more efficiently. Also not sure what the add function is doing, is this necessary for my use case?

https://codesandbox.io/s/ko68lqp9pv

[dbismut]

add is just a commodity for adding vectors. All it does is essentially [ v1[0] + v2[0], v1[1] + v2[1] ]

If you only care for x, your example could be simplified like so:

function() {
  const [{ x }, set] = useSpring(() => ({ x: 0 }))
  const bind = useGesture({
    onDrag: ({ down, delta: [dx], temp = x.getValue() }) => {
      set({ x: dx + temp, immediate: down })
      return temp
    }
  })

  React.useEffect(() => {
    const snapBack = () => set({ x: 0 })
    window.addEventListener('resize', snapBack)
    return () => window.removeEventListener('resize', snapBack)
  }, [set])

  return <animated.div {...bind()} style={{ transform: x.interpolate(v => `translate3d(${v}px,0,0)`) }} />
}

[sami616]

Thank you so much, this has helped me understand where i was going wrong.