withActionButtons: with action buttons flag - if set to true, both like and dislike buttons must be passed as props, otherwise the default one's will appear
emptyState: 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'importbubbleShooterfrom'@/assets/images/bubble-shooter.png'importcandyCrashfrom'@/assets/images/candy-crash.png'importclashRoyalfrom'@/assets/images/clash-royal.jpg'importEmptyStatefrom'@/assets/images/empty-state.svg'import{CardData,CardEvent,CardSwiper}from'react-card-swiper'constContent=()=>(<Typographypx={2}variant="h6">
Lorem ipsum dolor sit amet.
</Typography>)constmockData: 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/>},]exportdefaultfunctionSwipeSelectionPage(){consthandleDismiss: CardEvent=(el,meta,id,action,operation)=>{console.log({ el, meta, id, action, operation })// event data to be handled}consthandleFinish=(status: string)=>{console.log(status)// 'finished'}consthandleEnter: CardEnterEvent=(el,meta,id)=>{console.log(el,meta,id)}return(<Stackheight={'100%'}width={'100%'}direction="column"alignItems="center"justifyContent={'end'}p={2}><CardSwiperdata={mockData}onEnter={handleEnter}onFinish={handleFinish}onDismiss={handleDismiss}dislikeButton={<div>Left</div>}likeButton={<div>Right</div>}withActionButtonswithRibbonslikeRibbonText="INSTALL"dislikeRibbonText="PASS"ribbonColors={{bgLike: 'green',bgDislike: 'red',textColor: 'white'}}emptyState={<Stackdirection={'column'}alignItems={'center'}justifyContent={'center'}textAlign={'center'}gap={2}><Boxcomponent={'img'}width={250}src={EmptyState}/><Typographyvariant={'subtitle2'}>
You've reached the <br/> end of the list
</Typography></Stack>}/></Stack>)}