ComponentsList
List
stableFilterable, paginated scrollable list with an integrated loading spinner.
Browser preview is a simulation. The copied component runs in actual terminal apps.
list.tsx
Groceries72 items
❯Pocky
Ginger
Plantains
Honey Dew
Pineapple
(1–5 of8)
list.tsx
Installation
npx orizen-tui@latest add list
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/list.tsx
Usage
list.imports.tsx
list.example.tsx
Examples
Usage
list.example1.tsx
Groceries72 items
❯Pocky
Ginger
Plantains
Honey Dew
Pineapple
(1–5 of8)
list.example1.tsx
API Reference
List
PropTypeDefaultDescription
itemsListItem[]—Items to display
items—
ListItem[]Items to display
heightnumber8Number of visible items
height8
numberNumber of visible items
widthnumberundefinedWidth of the list in columns
widthundefined
numberWidth of the list in columns
filterstring""Case-insensitive filter string
filter""
stringCase-insensitive filter string
onSelect(item: ListItem) => voidundefinedCalled when Enter is pressed on an item
onSelectundefined
(item: ListItem) => voidCalled when Enter is pressed on an item
isLoadingbooleanfalseShow loading spinner instead of items
isLoadingfalse
booleanShow loading spinner instead of items
focusbooleantrueWhether to accept keyboard input
focustrue
booleanWhether to accept keyboard input
colorstringundefinedText color
colorundefined
stringText color