DeckSwiper

English | 中文

Deck Swiper helps you evaluate one option at a time, instead of selecting from a set of options.

How to use

npm install @rn-components-kit/deck-swiper --save

|Preview|Code| |------------|:---------:| ||Demo1 Code|

Props

• style
• data
• cardWidth
• cardHeight
• renderCard
• renderBottom
• onSwipeLeft
• onSwipeRight
• onBeginDragging
• onEndDragging

Methods

• prev
• next

Reference

Props

style

Allow you to customizr style

|Type|Required|Default| |----|--------|-------| |object|no|-|

data

Data source of cards

|Type|Required|Default| |----|--------|-------| |T[]|yes|-|

cardWidth

Width of card (it is important to help calculate animation)

|Type|Required|Default| |----|--------|-------| |number|yes|-|

cardHeight

Height of card (it is important to help calculate animation)

|Type|Required|Default| |----|--------|-------| |number|yes|-|

renderCard

(params: {item: T, index: number}) => React.ReactElement | null

Takes an item from data and renders it into the swiper

|Type|Required|Default| |----|--------|-------| |function|yes|-|

renderBottom

() => React.ReactElement | null

When all cards are swiped, it will be called and returns bottom layer component

|Type|Required|Default| |----|--------|-------| |function|no|-|

onSwipeLeft

(from: number, to: number) => void

A callback will be triggered when card is swiped left

|Type|Required|Default| |----|--------|-------| |function|no|() => {}|

onSwipeRight

(from: number, to: number) => void

A callback will be triggered when card is swiped right

|Type|Required|Default| |----|--------|-------| |function|no|() => {}|

onBeginDragging

() => void

A callback will be triggered when you begin to drag DeckSwiper

|Type|Required|Default| |----|--------|-------| |function|no|() => {}|

onEndDragging

() => void

A callback will be triggered when dragging operation ends

|Type|Required|Default| |----|--------|-------| |function|no|() => {}|

Methods

prev

prev()

Swipes to previous card

next

next()

Swipes to next card