ink-text-input

Text input component for Ink.

Install

$ npm install ink-text-input

Usage

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

class SearchQuery extends React.Component {
	constructor() {
		super();

		this.state = {
			query: ''
		};

		this.handleChange = this.handleChange.bind(this);
	}

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

				<TextInput
					value={this.state.query}
					onChange={this.handleChange}
				/>
			</Box>
		);
	}

	handleChange(query) {
		this.setState({query});
	}
}

render(<SearchQuery/>);

Props

value

Type: string

Value to display in a text input.

placeholder

Type: string

Text to display when value is empty.

showCursor

Type: boolean Default: false

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.

License

MIT © Vadim Demedes