Swipe Deck

Usage

import { SwipeDeck } from '@wdzyi/ui';

<SwipeDeck
  label='Palettes to review'
  cards={palettes}
  onSwipe={(card, direction) => direction === 'right' && keep(card.id)}
  onEmpty={showShortlist}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

cardsSwipeDeckCard[]

The deck, top card first. Each has an id, a name, its colours as hex, four fitting best, and a note such as what it’s for. Five sample palettes by default.

onSwipe(card: SwipeDeckCard, direction: 'left' | 'right') => void

Called as a card is thrown: right is keep, and left is skip.

onEmpty() => void

Called when the last card goes.

labelstring = 'Palettes'

Names the deck for screen readers.

classNamestring

Added to its root. It’s 300px wide at most, and narrows with the space it’s in.

Notes

• The card turns about its foot, 9° for a card’s width of travel, and the Keep or Skip stamp comes down from 125% as it’s carried towards a third of its width. The cards behind start to rise as it gets there.
• Let go past that third, or flicked faster than 0.55px a ms, it’s thrown: 420ms off the side, turning to 22° and fading, while the next rises from 95% and 7px down on a 520ms spring. Short of it, it springs home in 480ms.
• Skip, Keep and the left and right arrows throw it from rest, with the stamp already down. Undo brings the last card back from the side it left by in 560ms, or turns it round if it’s still on its way.
• Screen readers hear each card’s name, note and colours, and what became of it. Each code is set in black or white, whichever stands out more on its swatch.
• With reduced motion, cards fade rather than fly.