All projects
Ink Components
ink-scroll-bar
High-precision vertical scroll bars for Ink, in the border or inside the content.
$
npm install @byteland/ink-scroll-barTypeScript
Border & inset modes
Replace a border side or float inside.
Rich styling
Ink border styles plus block, line, thick and dots.
Drop-in wrapper
ScrollBarBox gives you a bordered box instantly.
Auto-hide
Hides itself when the content fits.
scroll-bar.tsx
import { useState } from "react";
import { Text } from "ink";
import { ScrollBarBox } from "@byteland/ink-scroll-bar";
const MyComponent = () => {
const [offset, setOffset] = useState(0);
return (
<ScrollBarBox
height={12}
width={40}
borderStyle="single"
scrollBarPosition="right"
contentHeight={50}
viewportHeight={10}
scrollOffset={offset}
>
<Text>Item 1...</Text>
</ScrollBarBox>
);
};