ComponentsViewport
Viewport
stableScrollable content area with overflow indicators and keyboard navigation.
Browser preview is a simulation. The copied component runs in actual terminal apps.
viewport.tsx
viewport↑↓ · PgUp/PgDn
> He holds him with a skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
An artichoke, dropt he.
--Samuel Taylor Coleridge
## Other foods worth mentioning
1. Carrots
█████░░░░░
viewport.tsx
Installation
npx orizen-tui@latest add viewport
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/viewport.tsx
Usage
viewport.imports.tsx
viewport.example.tsx
Examples
Usage
viewport.example1.tsx
viewport↑↓ · PgUp/PgDn
> He holds him with a skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
An artichoke, dropt he.
--Samuel Taylor Coleridge
## Other foods worth mentioning
1. Carrots
█████░░░░░
viewport.example1.tsx
API Reference
Viewport
PropTypeDefaultDescription
linesstring[]—Lines of text to render
lines—
string[]Lines of text to render
heightnumber—Number of visible lines
height—
numberNumber of visible lines
widthnumberundefinedFixed column width (optional)
widthundefined
numberFixed column width (optional)
showScrollIndicatorbooleantrueShow ↑/↓ overflow indicators
showScrollIndicatortrue
booleanShow ↑/↓ overflow indicators
focusbooleantrueWhether to accept keyboard scroll input
focustrue
booleanWhether to accept keyboard scroll input