1.0.0 • Published 5 years ago
@rn-components-kit/deck-swiper v1.0.0
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
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
1.0.0
5 years ago