Skip to content

swapkats/react-swipe-deck

Repository files navigation

react-swipe-card

Tinder style swipe cards

npm

Usage

Install

 $ npm install react-swipe-deck -save

Demo

Demo

Code

import Cards, { Card } from 'react-swipe-card'


const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
	  <Cards onEnd={action('end')} className='master-root'>
        {data.map(item =>
          <Card
            onSwipeLeft={action('swipe left')}
            onSwipeRight={action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

Components

Cards

Props:

  • className: string
  • onEnd: function
  • alertRight: component
  • alertLeft: component
  • alertTop: component
  • alertBottom: component

Card

Props:

  • onSwipeLeft: function
  • onSwipeRight: function
  • onSwipeTop: function
  • onSwipeBottom: function

License

MIT License

Thanks

alexandre-garrec/react-swipe-card