ink-text-input
v6.0.0
Published
Text input component for Ink
Downloads
688,384
Readme
ink-text-input
Text input component for Ink.
Install
npm install ink-text-input
Usage
import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import TextInput from 'ink-text-input';
const SearchQuery = () => {
const [query, setQuery] = useState('');
return (
<Box>
<Box marginRight={1}>
<Text>Enter your query:</Text>
</Box>
<TextInput value={query} onChange={setQuery} />
</Box>
);
};
render(<SearchQuery />);
Props
value
Type: string
Value to display in a text input.
placeholder
Type: string
Text to display when value
is empty.
focus
Type: boolean
Default: true
Listen to user's input. Useful in case there are multiple input components at the same time and input must be "routed" to a specific component.
showCursor
Type: boolean
Default: true
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.
Uncontrolled usage
This component also exposes an uncontrolled version, which handles value
changes for you. To receive the final input value, use onSubmit
prop.
Initial value can be specified via initialValue
prop, which is supported only in UncontrolledTextInput
component.
import React from 'react';
import {render, Box, Text} from 'ink';
import {UncontrolledTextInput} from 'ink-text-input';
const SearchQuery = () => {
const handleSubmit = query => {
// Do something with query
};
return (
<Box>
<Box marginRight={1}>
<Text>Enter your query:</Text>
</Box>
<UncontrolledTextInput onSubmit={handleSubmit} />
</Box>
);
};
render(<SearchQuery />);