Text input component for Ink.

npm install ink-text-input

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 />);

Type: string

Value to display in a text input.

Type: string

Text to display when value is empty.

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.

Type: boolean
Default: true

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

Type: boolean
Default: false

Highlight pasted text.

Type: string

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

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

Type: Function

Function to call when value updates.

Type: Function

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

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 />);