title: How to have make functional tinder style cards in React.js(SandBox in description)?
body: <p>Currently, I am using a library called react-swing(<a href="https://www.npmjs.com/package/react-swing" rel="nofollow noreferrer">https://www.npmjs.com/package/react-swing</a>), based on the library Swing(<a href="https://github.com/gajus/swing" rel="nofollow noreferrer">https://github.com/gajus/swing</a>). 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 &quot;pack&quot; so you can loop through them again but I am struggling with this functionality any suggestions?</p>
  <p>Code:</p>
  <pre><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 (
          &lt;div className='webAppStyles'&gt;
              &lt;ReactSwing className=&quot;stack&quot; ref={projectStack} throwout={(e) =&gt; console.log('throwout', e)}&gt;
                  {Data.map((Projects, index) =&gt; {
                      return &lt;div&gt;{Projects.workName}&lt;/div&gt;
                  })}
              &lt;/ReactSwing&gt;
          &lt;/div &gt;
      )
  }
  </code></pre>
  <p>Sandbox(as requested I set up a sandbox hope someone can help me out!):
  <a href="https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/App.js</a></p>