How to useDrag with useSprings

[ghost]

How do I set an offset, or movement, for each spring created with useSprings? Since it's one offset per gesture, I believe that dragging one spring component to a certain coordinate is causing the next spring component to be moved exactly where the last is. What's the correct approach if I want each component to have its own offset, that is, that each component move independently? In order to avoid this unwanted behavior, I'm using the xy and currentTarget state properties to get some dynamic measuring, but I'm losing the bounds property since it only applies when you use movement or offset.

[dbismut]

The lib only stores one state. But you can use the from option.

So you could do something like:

const bind = useDrag(({ offset }) => {
// logic with offset
}, { from: ({ args: [index] }) => [springs[index].x.get(), springs[index].y.get()] }
  
return <>
  { springs.map((style, index) => (<div ref={index} {...bind(index)} />)
</>

This is just pseudo code but do you get the idea?

[ghost]

It works beautifully. Thanks.

[ghost]

@dbismut A quick one. I can't set bounds to be an array of elements, can I? For instance, to make these springs "know" each other's boundaries.

[dbismut]

Not as a built-in option.