1.1.25 • Published 3 months ago
react-card-swiper v1.1.25
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>
)
}
1.1.25
3 months ago
1.1.24
3 months ago
1.1.23
3 months ago
1.1.22
3 months ago
1.1.20
5 months ago
1.1.19
5 months ago
1.1.18
5 months ago
1.1.16
5 months ago
1.1.15
5 months ago
1.1.14
5 months ago
1.1.17
5 months ago
1.1.12
5 months ago
1.1.11
5 months ago
1.1.10
5 months ago
1.1.13
5 months ago
1.1.9
5 months ago
1.1.8
5 months ago
1.1.7
5 months ago
1.1.6
5 months ago
1.1.5
5 months ago
1.1.4
5 months ago
1.1.3
5 months ago
1.1.2
5 months ago
1.1.1
5 months ago
1.1.0
5 months ago
1.0.0
5 months ago
0.0.28
5 months ago
0.0.27
5 months ago
0.0.26
5 months ago
0.0.25
5 months ago
0.0.24
5 months ago
0.0.23
5 months ago
0.0.22
5 months ago
0.0.21
5 months ago
0.0.20
5 months ago
0.0.19
6 months ago
0.0.18
6 months ago
0.0.9
6 months ago
0.0.8
6 months ago
0.0.7
6 months ago
0.0.6
6 months ago
0.0.4
6 months ago
0.0.3
6 months ago
0.0.2
6 months ago
0.0.1
6 months ago