1.1.25 • Published 1 year ago

react-card-swiper v1.1.25

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

react-card-swiper

npm package npm downloads

Demo

📦 Installation

  npm i --save react-card-swiper

🔗 Props

  • data: Card Data Array of Objects
  • onDismiss: Card Event of Card Dismiss
  • onEnter: Card Event of Card Enter
  • onFinish: When All Cards Have Been Dismissed
  • dislikeButton: your custom react dislike button
  • likeButton: your custom react like button
  • 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
parametertypedefaultrequireddescription
dataCardData[]truedata to be passed to the card
onDismissCardEventfalseWhen card is dismissed by swipe or by click
onEnterCardEnterEventfalseWhen new card is entered
onFinish(status: SwipeAction.FINISHED) => voidfalseonFinish event
dislikeButtonReact.JSX.Elementfalseyour custom dislike button
likeButtonReact.JSX.Elementfalseyour custom like button
withActionButtonsBooleanfalsefalsewith action buttons flag
withRibbonsBooleanfalsefalsewith ribbons flag
likeRibbonTextBooleanLIKEfalseribbon like text
dislikeRibbonTextBooleanPASSfalseribbon dislike text
ribbonColorsCardRibbonColorsfalseribbon background & text colors
emptyStateReact.JSX.Elementfalsewill 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

1 year ago

1.1.24

1 year ago

1.1.23

1 year ago

1.1.22

1 year ago

1.1.20

2 years ago

1.1.19

2 years ago

1.1.18

2 years ago

1.1.16

2 years ago

1.1.15

2 years ago

1.1.14

2 years ago

1.1.17

2 years ago

1.1.12

2 years ago

1.1.11

2 years ago

1.1.10

2 years ago

1.1.13

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago

0.0.28

2 years ago

0.0.27

2 years ago

0.0.26

2 years ago

0.0.25

2 years ago

0.0.24

2 years ago

0.0.23

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago