React Swipable Cards

React-Spring
Semantic-ui
React v16

A react component that allows for swipable cards.

Features

Can Drag card
Can Swipe Card
Can Dispatch Given Actions
Animated to given direction

Demo

Link to demo

Example Code

Example code using React-Redux...

import React, { useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { SwipeCard, SwipeCards } from "@tehnools/swipable-cards";
import { swipeLeft, swipeRight } from "./actions/swipe.actions";
import { getCardsSuccess } from "./actions/pot.actions";

const Pot = () => {
  const dispatch = useDispatch();
  const cards = useSelector(state => state.pots, shallowEqual);
  const displayEmpty = () => <p>Sorry no more cards</p>;
  useEffect(() => {
    dispatch(getCardsSuccess());
  },[]);

 return (
    <div className="pot">
      <SwipeCards onEnd={displayEmpty}>
        {cards &&
          cards.length > 0 &&
          cards.map((card, index) => (
            <SwipeCard
              key={index}
              name={card.name}
              className={'ui card swipe-card'}
              onSwipeLeft={() => dispatch(swipeLeft(card.id))}
              onSwipeRight={() => dispatch(swipeRight(card.id))}
            >
              <Card.Header>
                <h1>{card.name}</h1>
              </Card.Header>
            </SwipeCard>
          ))}
      </SwipeCards>
    </div>
  )
}

export default Pot