Text input component for Ink
npm install ink-text-input> Text input component for Ink.
``sh`
npm install ink-text-input
`jsx
import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import TextInput from 'ink-text-input';
const SearchQuery = () => {
const [query, setQuery] = useState('');
return (
);
};
render(
`

Type: string
Value to display in a text input.
Type: string
Text to display when value is empty.
Type: boolean \true
Default:
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.
Type: boolean\true
Default:
Whether to show cursor and allow navigation inside text input with arrow keys.
Type: boolean\false
Default:
Highlight pasted text.
Type: string
Replace all chars and mask the value. Useful for password inputs.
`jsx`
//=> "*"
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.initialValue
Initial value can be specified via prop, which is supported only in UncontrolledTextInput component.
`jsx
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 (
);
};
render(
``