ink-text-input

ink-text-input

Text input component for Ink.

Install

npm install ink-text-input

Usage

import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import TextInput from 'ink-text-input';

const SearchQuery = () => {
	const [query, setQuery] = useState('');

	return (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<TextInput value={query} onChange={setQuery} />
		</Box>
	);
};

render(<SearchQuery />);

Props

value

Type: string

Value to display in a text input.

placeholder

Type: string

Text to display when value is empty.

focus

Type: boolean
Default: true

Listen to user's input. Useful in case there are multiple input components at the same time and input must be "routed" to a specific component.

showCursor

Type: boolean
Default: true

Whether to show cursor and allow navigation inside text input with arrow keys.

highlightPastedText

Type: boolean
Default: false

Highlight pasted text.

mask

Type: string

Replace all chars and mask the value. Useful for password inputs.

<TextInput value="Hello" mask="*" />
//=> "*****"

onChange

Type: Function

Function to call when value updates.

onSubmit

Type: Function

Function to call when Enter is pressed, where first argument is a value of the input.

Uncontrolled usage

This component also exposes an uncontrolled version, which handles value changes for you. To receive the final input value, use onSubmit prop. Initial value can be specified via initialValue prop, which is supported only in UncontrolledTextInput component.

import React from 'react';
import {render, Box, Text} from 'ink';
import {UncontrolledTextInput} from 'ink-text-input';

const SearchQuery = () => {
	const handleSubmit = query => {
		// Do something with query
	};

	return (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<UncontrolledTextInput onSubmit={handleSubmit} />
		</Box>
	);
};

render(<SearchQuery />);

Similar packages

Other packages similar to ink-text-input

ink

Ink is a React renderer for creating command-line interface applications. While it provides the foundation for building CLI apps, it does not include built-in text input components like ink-text-input. Developers can use Ink to create custom components or integrate third-party components like ink-text-input.

blessed

Blessed is a library for creating terminal user interfaces. It provides a wide range of widgets, including text input fields, but it uses a different approach compared to Ink. Blessed is more low-level and imperative, whereas Ink and ink-text-input are declarative and React-based.

inquirer

Inquirer is a library for creating interactive command-line prompts. It includes various types of prompts, such as text input, password input, and more. Inquirer is more focused on creating prompts and collecting user input, whereas ink-text-input is a React component that can be used within a larger Ink-based CLI application.