jrunning / ink-text-input

Text input component for Ink

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ink-text-input Build Status

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

About

Text input component for Ink

License:MIT License


Languages

Language:JavaScript 100.0%