Component <SwipeCards />

Props

Props	Type	Meaning	Possible values
flickOnSwipe	boolean	Whether or not to let the element be flicked away off-screen after a swipe	true / false
preventSwipe	array	An array of directions for which to prevent swiping out of screen	up / left / down / right
preventTouch	boolean	Add or remove preventDefault function for a card	true / false
swipeManual	object	Config for card autoswipe	{ swipe: boolean, power?: number, direction?: DirectionType }
onSwipe	function	Callback that will be executed when a swipe has been completed	(dir: string) => void
onCardClick	function	Callback that will be executed when card was clicked	() => void
onCardLeftScreen	function	Callback that will be executed when a card has left the screen	(dir: string) => void

---

Demo

const SwipeCardsDemo = () => {
  const [autoSwipe, setAutoSwipe] = useState([])

  return (
    <>
      <button className="btn" type="button" onClick={() => setAutoSwipe(prev => [...prev, 'D'])}>
        Swipe D
      </button>
      <button className="btn" type="button" onClick={() => setAutoSwipe(prev => [...prev, 'C'])}>
        Swipe C
      </button>
      <button className="btn" type="button" onClick={() => setAutoSwipe(prev => [...prev, 'B'])}>
        Swipe B
      </button>
      <button className="btn" type="button" onClick={() => setAutoSwipe(prev => [...prev, 'A'])}>
        Swipe A
      </button>

      <div className="cards">
        <SwipeCards
          swipeManual={{ swipe: autoSwipe.includes('D') }}
          onCardLeftScreen={() => setAutoSwipe(prev => prev.filter(current => current !== 'D'))}
        >
          d
        </SwipeCards>
        <SwipeCards
          swipeManual={{ swipe: autoSwipe.includes('C') }}
          preventTouch
          onCardLeftScreen={() => setAutoSwipe(prev => prev.filter(current => current !== 'C'))}
        >
          c
        </SwipeCards>
        <SwipeCards
          swipeManual={{ swipe: autoSwipe.includes('B') }}
          onCardLeftScreen={() => setAutoSwipe(prev => prev.filter(current => current !== 'B'))}
        >
          b
        </SwipeCards>
        <SwipeCards
          swipeManual={{ swipe: autoSwipe.includes('A') }}
          preventTouch
          onCardLeftScreen={() => setAutoSwipe(prev => prev.filter(current => current !== 'A'))}
        >
          a
        </SwipeCards>
      </div>
    </>
  )
}

d

c

b

a