Skip to content

frutinder/react-swipe-card

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-swipe-card

Tinder style swipe cards

npm

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

Packages

No packages published

Languages

  • JavaScript 85.7%
  • CSS 14.3%