rsm-rcs
v1.1.35
Published
A Tinder Like - Card Swiper
Downloads
37
Maintainers
Readme
react-card-swiper
📦 Installation
npm i --save react-card-swiper
🔗 Props
data
: Card Data Array of ObjectsonDismiss
: Card Event of Card DismissonEnter
: Card Event of Card EnteronFinish
: When All Cards Have Been DismisseddislikeButton
: your custom react dislike buttonlikeButton
: your custom react like buttonwithActionButtons
: with action buttons flag - if set to true, both like and dislike buttons must be passed as props, otherwise the default one's will appearemptyState
: your custom empty state when all cards have been dismissed
| parameter | type | default | required | description | | ----------------- | -------------------------------------- | ------- | -------- | --------------------------------------------------- | | data | CardData[] | | true | data to be passed to the card | | onDismiss | CardEvent | | false | When card is dismissed by swipe or by click | | onEnter | CardEnterEvent | | false | When new card is entered | | onFinish | (status: SwipeAction.FINISHED) => void | | false | onFinish event | | dislikeButton | React.JSX.Element | | false | your custom dislike button | | likeButton | React.JSX.Element | | false | your custom like button | | withActionButtons | Boolean | false | false | with action buttons flag | | withRibbons | Boolean | false | false | with ribbons flag | | likeRibbonText | Boolean | LIKE | false | ribbon like text | | dislikeRibbonText | Boolean | PASS | false | ribbon dislike text | | ribbonColors | CardRibbonColors | | false | ribbon background & text colors | | emptyState | React.JSX.Element | | false | will be rendered when all cards have been dismissed |
🔨 Usage
import { Stack, Typography } from '@mui/material'
import bubbleShooter from '@/assets/images/bubble-shooter.png'
import candyCrash from '@/assets/images/candy-crash.png'
import clashRoyal from '@/assets/images/clash-royal.jpg'
import EmptyState from '@/assets/images/empty-state.svg'
import { CardData, CardEvent, CardSwiper } from 'react-card-swiper'
const Content = () => (
<Typography px={2} variant="h6">
Lorem ipsum dolor sit amet.
</Typography>
)
const mockData: CardData[] = [
{ id: '88552078', meta: { apk: 'some-apk-a.apk' }, src: bubbleShooter, content: <Content /> },
{ id: 'fc7e0bd4', meta: { apk: 'some-apk-b.apk' }, src: candyCrash, content: <Content /> },
{ id: 'da9a7067', meta: { apk: 'some-apk-c.apk' }, src: clashRoyal, content: <Content /> },
]
export default function SwipeSelectionPage() {
const handleDismiss: CardEvent = (el, meta, id, action, operation) => {
console.log({ el, meta, id, action, operation }) // event data to be handled
}
const handleFinish = (status: string) => {
console.log(status) // 'finished'
}
const handleEnter: CardEnterEvent = (el, meta, id) => {
console.log(el, meta, id)
}
return (
<Stack height={'100%'} width={'100%'} direction="column" alignItems="center" justifyContent={'end'} p={2}>
<CardSwiper
data={mockData}
onEnter={handleEnter}
onFinish={handleFinish}
onDismiss={handleDismiss}
dislikeButton={<div>Left</div>}
likeButton={<div>Right</div>}
withActionButtons
withRibbons
likeRibbonText="INSTALL"
dislikeRibbonText="PASS"
ribbonColors={{ bgLike: 'green', bgDislike: 'red', textColor: 'white' }}
emptyState={
<Stack direction={'column'} alignItems={'center'} justifyContent={'center'} textAlign={'center'} gap={2}>
<Box component={'img'} width={250} src={EmptyState} />
<Typography variant={'subtitle2'}>
You've reached the <br /> end of the list
</Typography>
</Stack>
}
/>
</Stack>
)
}