Ink, the React renderer for interactive command-line apps, recently announced version 3 with new built-in hooks which enable better focus and stream management (e.g. stdin) in the terminal. Developers can leverage the React development tools to inspect the output of an Ink app. Ink 3 also features updated components that allow for better styling of CLIs, built-in error handler and log interception, and other performance and stability improvements.
Ink 3 offers 7 new hooks to developers of interactive command-line apps. useInput handles user input with a callback that is called for each character when a user enters any input. useApp exposes a method to manually exit the app (unmount). useStdin, useStdout and useStderr give direct access to stdin, stdout and stderr streams. Components that use the useFocus hook have their focus handled by Ink, so when a user presses Tab, Ink will switch focus to this component. If there are multiple components that execute useFocus hook, the focus will be given to them in the order that these components are rendered in. useFocusManager exposes methods to enable or disable focus management for all components or manually switch focus to next or previous components.
Ink supports React Devtools out-of-the-box. Developers can inspect the output of their Ink app, manually change the props of any component, and see the CLI update on the fly without having to restart it.
(Source: release note)
Ink 3 merged all functionality from the <Color> component into the <Text> component, resulting in simplified color declaration for text content. Thus, the following code:
<Color red>
<Text bold>Hello World</Text>
</Color>
is replaced in Ink 3 by:
<Text bold color="red">
Hello World
</Text>
Developers can use HEX or RGB colors (if the target terminal supports it):
<Text color="green">Green</Text>
<Text color="#005cc5">Blue</Text>
<Text color="rgb(232, 131, 136)">Red</Text>
Developers can also set a colorful background with thebackgroundColor property:
<Text color="black" backgroundColor="green">
Black on Green
</Text>
Boxes in Ink 3 can now have seven different border styles:
Ink 3 also intercepts React’s error messages by means of a global React error boundary. Ink 3 pretty-prints the intercepted error messages and stack trace, keeping only the relevant information. Ink 3 also intercepts calls to console methods (e.g. console.error) and ensures that logs are displayed correctly above the terminal app’s UI and do not interfere with each other.
Ink 3 additionally ships with performance and stability improvements. Ink now rerenders when the terminal is resized, refactored the codebase to TypeScript, and supports React Suspense. Ink 3 fixes rendering bugs and inconsistencies in FlexBox support, incorporating the feedback received from its users – e.g. Gatsby, Terraform, tap, Prisma, Shopify, New York Times and many others.
Ink 3’s full release note can be accessed online. Ink.js is available under the MIT open source license. Contributions are welcome via the GitHub package.
