alexandre-garrec/react-swipe-card

Tinder style swipe cards

react-swipe-card

Tinder style swipe cards

• Usage
• Demo
• Code
• Components
• License

Usage

Install

 $ npm install react-swipe-card -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