All projects
Ink Components
ink-scroll-view
A ScrollView for Ink: content taller than the terminal, scrolled under your control.
$
npm install ink-scroll-viewTypeScript
Flexible container
Holds content larger than the viewport.
Auto-measurement
Measures child heights for you.
Dynamic content
Add, remove, expand and collapse items live.
Layout stability
Keeps scroll position when content changes.
scroll.tsx
import { useRef } from "react";
import { render, Text, Box, useInput } from "ink";
import { ScrollView, ScrollViewRef } from "ink-scroll-view";
const App = () => {
const scrollRef = useRef<ScrollViewRef>(null);
useInput((input, key) => {
if (key.upArrow) scrollRef.current?.scrollBy(-1);
if (key.downArrow) scrollRef.current?.scrollBy(1);
});
return (
<Box height={10} borderStyle="single" flexDirection="column">
<ScrollView ref={scrollRef}>
{Array.from({ length: 50 }).map((_, i) => (
<Text key={i}>Item {i + 1}</Text>
))}
</ScrollView>
</Box>
);
};
render(<App />);