Text input component for Ink.
$ npm install ink-text-input
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 />);
Type: string
Value to display in a text input.
Type: string
Text to display when value
is empty.
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.
import React from 'react';
import { render, Box } from 'ink';
import { UncontrolledTextInput } from 'ink-text-input';
const SearchQuery = () => {
const handleSubmit = query => {
// Do something with query
};
return (
<Box>
<Box marginRight={1}>Enter your query:</Box>
<UncontrolledTextInput onSubmit={handleSubmit} />
</Box>
);
};
render(<SearchQuery />);
MIT © Vadim Demedes