ink-text-input

What is ink-text-input?

The ink-text-input package is a React component for Ink, a React renderer for command-line interfaces. It allows developers to create interactive text input fields in their CLI applications.

What are ink-text-input's main functionalities?

Basic Text Input

This feature allows you to create a basic text input field where users can type in their input. The state of the input is managed using React's useState hook.

const { render, Text } = require('ink');
const TextInput = require('ink-text-input').default;
const React = require('react');

const App = () => {
  const [value, setValue] = React.useState('');

  return (
    <>
      <Text>Enter your name: </Text>
      <TextInput value={value} onChange={setValue} />
    </>
  );
};

render(<App />);

Password Input

This feature allows you to create a password input field where the input is masked with a specified character, such as an asterisk (*).

const { render, Text } = require('ink');
const TextInput = require('ink-text-input').default;
const React = require('react');

const App = () => {
  const [value, setValue] = React.useState('');

  return (
    <>
      <Text>Enter your password: </Text>
      <TextInput value={value} onChange={setValue} mask="*" />
    </>
  );
};

render(<App />);

Submit Handler

This feature allows you to handle the submission of the input value. When the user presses Enter, the onSubmit handler is called, and you can perform actions such as logging the input value.

const { render, Text } = require('ink');
const TextInput = require('ink-text-input').default;
const React = require('react');

const App = () => {
  const [value, setValue] = React.useState('');

  const handleSubmit = () => {
    console.log('Submitted value:', value);
  };

  return (
    <>
      <Text>Enter your name: </Text>
      <TextInput value={value} onChange={setValue} onSubmit={handleSubmit} />
    </>
  );
};

render(<App />);

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.

README

ink-text-input

Text input component for Ink.

Install

$ npm install ink-text-input

Usage

const {h, render, Component} = require('ink');
const TextInput = require('ink-text-input');

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

		this.state = {
			query: ''
		};

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

	render(props, state) {
		return (
			<div>
				Enter your query:

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

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

	handleSubmit(value) {
		// Query submitted
	}
}

render(<SearchQuery/>);

Props

value

Type: string

Value to display in a text input.

placeholder

Type: string

Text to display when value is empty.

onChange

Type: Function

Function to call when value updates.

onSubmit

Type: Function

Function to call when user press Enter.

License

MIT © Vadim Demedes