All projects
Ink Components
ink-scroll-list
A selectable list for Ink that scrolls to keep the selected item in view.
$
npm install ink-scroll-listTypeScript
Controlled selection
The parent owns selectedIndex.
Auto-scrolling
The selected item always stays visible.
Alignment modes
auto, top, bottom or center.
Efficient
Tracks selection without full re-layouts.
list.tsx
import { useState } from "react";
import { render, Text, Box, useInput } from "ink";
import { ScrollList } from "ink-scroll-list";
const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
const App = () => {
const [selected, setSelected] = useState(0);
useInput((input, key) => {
if (key.upArrow) setSelected((i) => Math.max(i - 1, 0));
if (key.downArrow) setSelected((i) => Math.min(i + 1, items.length - 1));
});
return (
<Box borderStyle="single" height={10}>
<ScrollList selectedIndex={selected}>
{items.map((item, i) => (
<Text key={i} color={i === selected ? "green" : "white"}>
{i === selected ? "> " : " "}
{item}
</Text>
))}
</ScrollList>
</Box>
);
};
render(<App />);