Swipe deck
Cards decided one by one — drag right to like, left to pass, or the buttons (← → on the web) — with PersonCard: a person's photos, name, age, seal, distance, bio and interests.
Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Discover in a dating app: like or pass, one profile at a time.
- Any one-by-one decision: approve or reject, keep or skip.
Quand ne pas l’utiliser
- To browse many items side by side.À la place : List
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { SwipeDeck, PersonCard } from "@krizaka/ui/swipe-deck";Exemples
Discover
Two profiles, photos to page through, the deck decided by drag, buttons or keys.
Elena 29
3.2 km awaySunsets, vinyl and long walks.
Props
PersonCard
A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips.
| Prop | Type | Défaut | Description |
|---|---|---|---|
namerequis | string | — | The name. |
photosrequis | readonly { src: string; alt?: string | undefined; }[] | — | The person's photos (URLs), the first shown first; click a side, or its buttons, to move between them. |
age | number | — | The age, written after the name. |
badge | ReactNode | — | Beside the name: a VerifiedBadge. |
bio | string | — | A sentence about the person. |
className | string | — | Classes merged on the card. |
footer | ReactNode | — | At the bottom: the interests as chips. |
meta | ReactNode | — | A line under the name: a distance, a job. |
photoLabels | { previous: string; next: string; } | { previous: "Previous photo", next: "Next photo" } | The photo buttons' words: { previous: "Previous photo", next: "Next photo" } — passed translated. |
SwipeDeck
A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced.
| Prop | Type | Défaut | Description |
|---|---|---|---|
getIdrequis | (item: T) => string | — | A card's id. |
getNamerequis | (item: T) => string | — | A card's name, for the announcements. |
itemsrequis | readonly T[] | — | The cards still to decide, the first on top. |
labelsrequis | SwipeDeckLabels | — | The words, passed translated. |
onSwiperequis | (item: T, direction: SwipeDirection) => void | — | Called with the card decided and the decision; remove it from items. |
renderCardrequis | (item: T) => ReactNode | — | A card (usually a PersonCard). |
className | string | — | Classes merged on the root. |
empty | ReactNode | — | Shown when there is no card left (an EmptyState). |
Accessibilité
- The top card is the only one exposed; the next waits hidden from assistive technology.
- React Native offers Like and Pass as accessibility actions of the card.
- Under reduced motion the card leaves without flying.
Clavier
| Touches | Action |
|---|---|
| Arrow Right / Arrow Left | On the focused deck: like or pass the top card. |
| Tab | Reaches the card's photo buttons and the like and pass buttons. |
Bonnes pratiques
- Remove the decided card from
itemsinonSwipe; keep two or three loaded ahead. - Always keep the buttons: a swipe is never the only way.
- Say the decision (
decided) so a screen reader hears it.
Composants liés
Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub