Ink Ui

All text must be wrapped in <Text>. Raw strings outside <Text> cause errors.

Hooks

useInput(handler, options?)

useInput((input: string, key: Key) => {
  if (input === ' ') { /* space pressed */ }
  if (key.return) { /* enter pressed */ }
  if (key.escape) { /* escape pressed */ }
}, { isActive: true });

Key fields: upArrow, downArrow, leftArrow, rightArrow, return, escape, ctrl, meta, shift, tab, backspace, delete

useApp()

Returns { exit(error?) }. Call exit() to quit the app cleanly.

useFocus(options?)

Returns { isFocused }. Options: { autoFocus, id }. Tab cycles focus.

useFocusManager()

Returns { focusNext(), focusPrevious(), focus(id), enableFocus(), disableFocus() }.

useStdin() / useStdout() / useStderr()

Low-level stream access. useStdin() returns { stdin, isRawModeSupported, setRawMode }.

render()

import { render } from 'ink';
const instance = render(<App />, {
  exitOnCtrlC: true,     // default: true
});
// instance.rerender(<App updated />)
// instance.unmount()
// await instance.waitUntilExit()

Patterns

Polling with useEffect

useEffect(() => {
  const id = setInterval(() => fetchData(), 5000);
  return () => clearInterval(id);
}, []);

Keyboard controls

const { exit } = useApp();
useInput((input, key) => {
  if (input === 'q') exit();
  if (input === ' ') togglePlay();
});

Layout

<Box flexDirection="column" padding={1}>
  <Text bold>Title</Text>
  <Box marginTop={1}>
    <Text dimColor>hint text</Text>
  </Box>
</Box>

Import Conventions (this project)

import { render, Box, Text, useInput, useApp } from 'ink';
import type { Key } from 'ink';
import { useState, useEffect, useCallback } from 'react';

Use import type for type-only imports. Use .js extension for relative imports.