How to have make functional tinder style cards in React.js(SandBox in description)?

Question

Currently, I am using a library called react-swing(https://www.npmjs.com/package/react-swing), based on the library Swing(https://github.com/gajus/swing). Both libraries allow you create swipeable tinder cards. currently I can swipe away components and console log the direction of the swipe but I am struggling to understand how to implement a function upon swipe. Ideally, I'd like the card that's been swiped to go to the back of the "pack" so you can loop through them again but I am struggling with this functionality any suggestions?

Code:

function Webapps() {
import React, { useRef, useState, useEffect } from 'react';
import Data from '../Data/webApps_data';
import ReactSwing from '../../node_modules/react-swing/dist/react-swing.js';

    const projectStack = useRef();


    return (
        <div className='webAppStyles'>
            <ReactSwing className="stack" ref={projectStack} throwout={(e) => console.log('throwout', e)}>
                {Data.map((Projects, index) => {
                    return <div>{Projects.workName}</div>
                })}
            </ReactSwing>
        </div >
    )
}

Sandbox(as requested I set up a sandbox hope someone can help me out!): https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/App.js

Answer 1

I've found a way to recenter the swipable elemented using translate(0, 0) rotate(0), but I don't know how to trigger this upon a swipe being detected Update: can't use this as when you try and swipe the element again it disappears and is broken

Answer 2

I don't know about react-swing, but this can be done with react-voodoo.

Here a sample card swipe implementation with a codesandbox :

https://react-voodoo.github.io/react-voodoo-samples/

Adding some zIndex & animation update may do the trick

react-swing seems to do it in a hard writen css synchronized way; changing the animation probably require you to fork the entire lib.

Also this can probably be done from scratch with react-spring too