ink

Type Aliases

AppProps

AppProps: object

Type declaration

Name	Type	Description
exit	(error?) => void	Exit (unmount) the whole Ink app.

---

BoxProps

BoxProps: Except<Styles, "textWrap">

---

DOMElement

DOMElement: object & InkNode

Type declaration

Name	Type
attributes	Record<string, DOMNodeAttribute>
childNodes	DOMNode[]
nodeName	ElementNames
internal_transform?	OutputTransformer
isStaticDirty?	boolean
onComputeLayout?	() => void
onImmediateRender?	() => void
onRender?	() => void
staticNode?	DOMElement

---

Instance

Instance: object

Type declaration

Name	Type	Description
cleanup	() => void	‐
clear	() => void	Clear output.
rerender	Ink["render"]	Replace previous root node with a new one or update props of the current root node.
unmount	Ink["unmount"]	Manually unmount the whole Ink app.
waitUntilExit	Ink["waitUntilExit"]	Returns a promise, which resolves when app is unmounted.

---

Key

Key: object

Handy information about a key that was pressed.

Type declaration

Name	Type	Description
backspace	boolean	Backspace key was pressed.
ctrl	boolean	Ctrl key was pressed.
delete	boolean	Delete key was pressed.
downArrow	boolean	Down arrow key was pressed.
escape	boolean	Escape key was pressed.
leftArrow	boolean	Left arrow key was pressed.
meta	boolean	Meta key was pressed.
pageDown	boolean	Page Down key was pressed.
pageUp	boolean	Page Up key was pressed.
return	boolean	Return (Enter) key was pressed.
rightArrow	boolean	Right arrow key was pressed.
shift	boolean	Shift key was pressed.
tab	boolean	Tab key was pressed.
upArrow	boolean	Up arrow key was pressed.

---

NewlineProps

NewlineProps: object

Type declaration

Name	Type	Description
count?	number	Number of newlines to insert. Default 1;

---

RenderOptions

RenderOptions: object

Type declaration

Name	Type	Description
debug?	boolean	If true, each update will be rendered as a separate output, without replacing the previous one. Default false;
exitOnCtrlC?	boolean	Configure whether Ink should listen to Ctrl+C keyboard input and exit the app. This is needed in case process.stdin is in raw mode, because then Ctrl+C is ignored by default and process is expected to handle it manually. Default true;
patchConsole?	boolean	Patch console methods to ensure console output doesn't mix with Ink output. Default true;
stderr?	NodeJS.WriteStream	Error stream. Default process.stderr;
stdin?	NodeJS.ReadStream	Input stream where app will listen for input. Default process.stdin;
stdout?	NodeJS.WriteStream	Output stream where app will be rendered. Default process.stdout;

---

StaticProps<T>

StaticProps<T>: object

Type Parameters

Type Parameter
T

Type declaration

Name	Type	Description
children	(item, index) => ReactNode	Function that is called to render every item in items array. First argument is an item itself and second argument is index of that item in items array. Note that key must be assigned to the root component.
items	T[]	Array of items of any type to render using a function you pass as a component child.
style?	Styles	Styles to apply to a container of child elements. See for supported properties.

---

StderrProps

StderrProps: object

Type declaration

Name	Type	Description
stderr	NodeJS.WriteStream	Stderr stream passed to render() in options.stderr or process.stderr by default.
write	(data) => void	Write any string to stderr, while preserving Ink's output. It's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two. It's similar to <Static>, except it can't accept components, it only works with strings.

---

StdinProps

StdinProps: object

Type declaration

Name	Type	Description
internal_eventEmitter	EventEmitter	‐
internal_exitOnCtrlC	boolean	‐
isRawModeSupported	boolean	A boolean flag determining if the current stdin supports setRawMode. A component using setRawMode might want to use isRawModeSupported to nicely fall back in environments where raw mode is not supported.
setRawMode	(value) => void	Ink exposes this function via own <StdinContext> to be able to handle Ctrl+C, that's why you should use Ink's setRawMode instead of process.stdin.setRawMode. If the stdin stream passed to Ink does not support setRawMode, this function does nothing.
stdin	NodeJS.ReadStream	Stdin stream passed to render() in options.stdin or process.stdin by default. Useful if your app needs to handle user input.

---

StdoutProps

StdoutProps: object

Type declaration

Name	Type	Description
stdout	NodeJS.WriteStream	Stdout stream passed to render() in options.stdout or process.stdout by default.
write	(data) => void	Write any string to stdout, while preserving Ink's output. It's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two. It's similar to <Static>, except it can't accept components, it only works with strings.

---

TextProps

TextProps: object

Type declaration

Name	Type	Description
backgroundColor?	LiteralUnion<ForegroundColorName, string>	Same as color, but for background.
bold?	boolean	Make the text bold.
children?	ReactNode	‐
color?	LiteralUnion<ForegroundColorName, string>	Change text color. Ink uses chalk under the hood, so all its functionality is supported.
dimColor?	boolean	Dim the color (emit a small amount of light).
inverse?	boolean	Inverse background and foreground colors.
italic?	boolean	Make the text italic.
strikethrough?	boolean	Make the text crossed with a line.
underline?	boolean	Make the text underlined.
wrap?	Styles["textWrap"]	This property tells Ink to wrap or truncate text if its width is larger than container. If wrap is passed (by default), Ink will wrap text and split it into multiple lines. If truncate-* is passed, Ink will truncate text instead, which will result in one line of text with the rest cut off.

---

TransformProps

TransformProps: object

Type declaration

Name	Type	Description
transform	(children, index) => string	Function which transforms children output. It accepts children and must return transformed children too.
children?	ReactNode	‐

Functions

Box()

Box(props): ReactNode

<Box> is an essential Ink component to build your layout. It's like <div style="display: flex"> in the browser.

Parameters

Parameter	Type
props	object & object & RefAttributes<DOMElement>

Returns

ReactNode

---

measureElement()

measureElement(node): Output

Measure the dimensions of a particular <Box> element.

Parameters

Parameter	Type
node	DOMElement

Returns

Output

---

Newline()

Newline(__namedParameters): React.JSX.Element

Adds one or more newline (\n) characters. Must be used within components.

Parameters

Parameter	Type
__namedParameters	NewlineProps

Returns

React.JSX.Element

---

render()

render(node, options?): Instance

Mount a component and render the output.

Parameters

Parameter	Type
node	ReactNode
options?	WriteStream | RenderOptions

Returns

Instance

---

Spacer()

Spacer(): React.JSX.Element

A flexible space that expands along the major axis of its containing layout. It's useful as a shortcut for filling all the available spaces between elements.

Returns

React.JSX.Element

---

Static()

Static<T>(props): React.JSX.Element

<Static> component permanently renders its output above everything else. It's useful for displaying activity like completed tasks or logs - things that are not changing after they're rendered (hence the name "Static").

It's preferred to use <Static> for use cases like these, when you can't know or control the amount of items that need to be rendered.

For example, Tap uses <Static> to display a list of completed tests. Gatsby uses it to display a list of generated pages, while still displaying a live progress bar.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
props	StaticProps<T>

Returns

React.JSX.Element

---

Text()

Text(__namedParameters): React.JSX.Element | null

This component can display text, and change its style to make it colorful, bold, underline, italic or strikethrough.

Parameters

Parameter	Type
__namedParameters	TextProps

Returns

React.JSX.Element | null

---

Transform()

Transform(__namedParameters): React.JSX.Element | null

Transform a string representation of React components before they are written to output. For example, you might want to apply a gradient to text, add a clickable link or create some text effects. These use cases can't accept React nodes as input, they are expecting a string. That's what component does, it gives you an output string of its child components and lets you transform it in any way.

Parameters

Parameter	Type
__namedParameters	TransformProps

Returns

React.JSX.Element | null

---

useApp()

useApp(): AppProps

useApp is a React hook, which exposes a method to manually exit the app (unmount).

Returns

AppProps

---

useFocus()

useFocus(__namedParameters?): Output

Component that uses useFocus hook becomes "focusable" to Ink, so when user presses Tab, Ink will switch focus to this component. If there are multiple components that execute useFocus hook, focus will be given to them in the order that these components are rendered in. This hook returns an object with isFocused boolean property, which determines if this component is focused or not.

Parameters

Parameter	Type
__namedParameters?	Input

Returns

Output

---

useFocusManager()

useFocusManager(): Output

This hook exposes methods to enable or disable focus management for all components or manually switch focus to next or previous components.

Returns

Output

---

useInput()

useInput(inputHandler, options?): void

This hook is used for handling user input. It's a more convenient alternative to using StdinContext and listening to data events. The callback you pass to useInput is called for each character when user enters any input. However, if user pastes text and it's more than one character, the callback will be called only once and the whole string will be passed as input.

import {useInput} from 'ink';

const UserInput = () => {
  useInput((input, key) => {
    if (input === 'q') {
      // Exit program
    }

    if (key.leftArrow) {
      // Left arrow key pressed
    }
  });

  return …
};

Parameters

Parameter	Type
inputHandler	Handler
options?	Options

Returns

void

---

useStderr()

useStderr(): StderrProps

useStderr is a React hook, which exposes stderr stream.

Returns

StderrProps

---

useStdin()

useStdin(): StdinProps

useStdin is a React hook, which exposes stdin stream.

Returns

StdinProps

---

useStdout()

useStdout(): StdoutProps

useStdout is a React hook, which exposes stdout stream.

Returns

StdoutProps