ink-text-input

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