import React from 'react';
import {render} from 'ink';
import TextInput from 'ink-text-input';

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

        this.state = {
            query: ''
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.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/>);

<TextInput
    value="Hello"
    mask="*"
/>
//=> "*****"