ScrollableList
A dynamic list with proportional scrollbars and keyboard navigation.
ScrollableList is a highly interactive list component that efficiently renders large arrays of data within a fixed height. It supports keyboard navigation (Up/Down) and renders a visual, proportional scrollbar indicator.
Usage
import { ScrollableList, Text } from 'caret-tui';
const items = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E'];
const App = () => (
<ScrollableList
items={items}
height={3}
onSelect={(item) => console.log('Selected:', item)}
renderItem={(item, isSelected) => (
<Text color={isSelected ? 'green' : 'white'}>{item}</Text>
)}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | 'scrollable-list' | The focus ID used by FocusProvider. |
items | T[] | - | The array of items to render. |
height | number | - | The fixed viewport height (in lines) for the list. |
renderItem | (item: T, isSelected: boolean) => React.ReactNode | - | Function to render each item. |
onSelect | (item: T) => void | - | Callback fired when an item is selected via Enter. |
autoScroll | boolean | false | Automatically scrolls to the bottom when new items are added. |