Skip to content
Text input component for Ink
Branch: master
Clone or download
Latest commit e3f4264 Mar 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
media
src Minor changes Mar 23, 2019
.editorconfig
.gitattributes
.gitignore
.npmrc
.travis.yml
index.d.ts
index.test-d.tsx
license
package.json
readme.md Highlight pasted input (#24) Mar 23, 2019
test.js
yarn.lock

readme.md

ink-text-input Build Status

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

You can’t perform that action at this time.