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