### Install ink-text-input via npm

Source: https://github.com/vadimdemedes/ink-text-input/blob/master/readme.md

This snippet demonstrates how to install the ink-text-input package using npm, a package manager for JavaScript.

```sh
npm install ink-text-input
```

--------------------------------

### Implement Uncontrolled Text Input in Ink (React JSX)

Source: https://github.com/vadimdemedes/ink-text-input/blob/master/readme.md

This example demonstrates the usage of the UncontrolledTextInput component, which manages its own value internally. The onSubmit prop is used to retrieve the final input value when the user presses Enter.

```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 (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<UncontrolledTextInput onSubmit={handleSubmit} />
		</Box>
	);
};

render(<SearchQuery />);
```

--------------------------------

### Implement Controlled Text Input in Ink (React JSX)

Source: https://github.com/vadimdemedes/ink-text-input/blob/master/readme.md

This example shows how to use the TextInput component in a controlled manner within an Ink application. It utilizes React's useState hook to manage the input's value, updating it via the onChange prop.

```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 (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<TextInput value={query} onChange={setQuery} />
		</Box>
	);
};

render(<SearchQuery />);
```

--------------------------------

### ink-text-input Component API Reference

Source: https://github.com/vadimdemedes/ink-text-input/blob/master/readme.md

Detailed API documentation for the TextInput and UncontrolledTextInput components, outlining available props, their types, default values, and descriptions.

```APIDOC
TextInput Props:
  value: string
    Description: Value to display in a text input.
  placeholder: string
    Description: Text to display when value is empty.
  focus: boolean
    Default: true
    Description: 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: boolean
    Default: true
    Description: Whether to show cursor and allow navigation inside text input with arrow keys.
  highlightPastedText: boolean
    Default: false
    Description: Highlight pasted text.
  mask: string
    Description: Replace all chars and mask the value. Useful for password inputs.
  onChange: Function
    Description: Function to call when value updates.
  onSubmit: Function
    Description: Function to call when Enter is pressed, where first argument is a value of the input.

UncontrolledTextInput Props:
  initialValue: string
    Description: Initial value can be specified via initialValue prop, which is supported only in UncontrolledTextInput component.
  onSubmit: Function
    Description: Function to call when Enter is pressed, where first argument is a value of the input.
```

--------------------------------

### Apply Masking to TextInput Component (React JSX)

Source: https://github.com/vadimdemedes/ink-text-input/blob/master/readme.md

This snippet illustrates how to use the 'mask' prop with the TextInput component to replace all characters in the input value with a specified character, useful for password fields or masked inputs.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.