How to use useGesture v9 with refs and useSprings

[tim-soft]

I have a project that works similarly to the pager example: https://codesandbox.io/s/viewpager-v364z

With the exception that I need to be able to cancel the drag event

In react-use-gesture v7 I was able to store an array of refs and provide the current "page" to the gesture config

// which "page" to show
const [index, setIndex] = useState<number>(0);

// list of item refs
const imageStageRefs = useRef(
    [...Array(images.length)].map(() => React.createRef<HTMLElement>()) 
);

// springs setup
const [pagerSprings, set] = useSprings(images.length, { ... });

useGesture(
    onDrag: () => {...},
    onWheel: () => {...},
    // config with ref, whatever the config was to make event not passive
    { ref: imageStageRefs.current[index], event: { passive: false } }
)

return pagerSprings.map({ ... }, i) => <animated.div ref={imageStageRefs.current[i]} />

Upgrading to v9 and it appears changing the config on the fly was maybe a hack before and isn't supported now. Events only seem to fire for the first element. Is there a better/newer pattern for setting this up?

[dbismut]

Hi @tim-soft before getting into implementation specifics did you catch up with the new api?

We use domTarget and eventOptions where you use ref and event.

[tim-soft]

This was more or less some pseudo code and what I meant to write, thanks for clarifying

[dbismut]

So fixing the code with the actual API doesn't help?