List

Records read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.

Web + MobileBêtaAffichage de données

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: every list on FlashList; Orochia web's infinite lists.

Quand l’utiliser

Orazaka's jobs, Orochia's viewers and tippers of a story, a creator's payouts.
A long feed on a phone: sections by day, pull to refresh, swipe actions (React Native).

Quand ne pas l’utiliser

For records with several values to compare side by side.À la place : Data table
For what happened over time.À la place : Activity feed
For facts about one thing.À la place : Description list

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { List } from "@krizaka/ui/list";

Exemples

Jobs

Orazaka's jobs, each row opening its run, the status beside it.

Dub “Sunset session” into EnglishDubbing studiorunningnow
Transcribe the interview with ElenaTranscript studiodone14:02
Clip the five best momentsClips studiofailed12:15

Selectable, compact

A story's viewers, picked for a thank-you.

Mina Okafor@mina$12
Alex Moreau@alex$5
Elena Ruiz@elena—

2,000 rows

virtualize: only the rows in view are rendered.

Payout #2000$120.00
Payout #1999$157.00
Payout #1998$194.00
Payout #1997$231.00
Payout #1996$268.00
Payout #1995$305.00
Payout #1994$342.00
Payout #1993$379.00
Payout #1992$416.00
Payout #1991$453.00
Payout #1990$490.00
Payout #1989$527.00

Props

A list of records: dense or comfortable, selectable, actions beside each row, windowed when long, with its states.

Prop	Type	Défaut	Description
`aria-label`requis	`string`	—	The list's accessible name (“Jobs”).
`getId`requis	`(item: T) => string`	—	A stable id per record: the React key and the selection's value.
`items`requis	`readonly T[]`	—	The records, in order.
`row`requis	`(item: T) => ListRow`	—	What a record shows: its title, line, visuals, details, actions and where it leads.
`chevrons`	`boolean`	—	Shows a chevron on the rows that lead somewhere.
`className`	`string`	—	Classes merged on the root.
`defaultSelected`	`readonly string[]`	`[]`	The ids selected at first, uncontrolled.
`density`	`"comfortable" \| "compact"`	—	comfortable (default: 64 px rows with a line) · compact (44 px: dense admin lists).
`empty`	`ReactNode`	—	Shown when there is no record (an `EmptyState`).
`error`	`ReactNode`	—	A failure in place of the rows (an `Alert` with a retry); announced.
`footer`	`ReactNode`	—	Under the list: a `Pagination`, a “Load more” button, a total.
`labels`	`Partial<ListLabels>`	—	The words, passed translated; English by default.
`loading`	`boolean`	—	Loading: `loadingRows` skeleton rows and `aria-busy`.
`loadingRows`	`number`	`5`	How many skeleton rows. Default 5.
`onSelectedChange`	`((selected: string[]) => void)`	—	Called with the new selection.
`selectable`	`boolean`	—	A checkbox per row.
`selected`	`readonly string[]`	—	The ids selected (controlled).
`virtualize`	`{ rowHeight: number; height: number; overscan?: number; }`	—	Renders only the rows in view: fixed `rowHeight`, a scrolling region of `height` px.

Accessibilité

A ul named by aria-label; the main action fills the row without nesting the others.
A windowed list is a scrolling region the keyboard can reach.
On React Native, swipe actions are also accessibility actions.

Clavier

Touches	Action
`Tab`	Moves through the rows' main actions, their checkboxes and their secondary actions.

Bonnes pratiques

One main action per row (a link or onSelect); secondary actions go in actions, beside it.
Show loading for the first page only; the next pages go in footer (a “Load more” button, a Pagination).
Past a few hundred rows, virtualize with a fixed row height.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub