https://github.com/akgondber/ink-text-input-2
Text input component for Ink
https://github.com/akgondber/ink-text-input-2
Last synced: 3 months ago
JSON representation
Text input component for Ink
- Host: GitHub
- URL: https://github.com/akgondber/ink-text-input-2
- Owner: akgondber
- License: mit
- Created: 2024-02-02T23:49:23.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-03T06:24:31.000Z (over 1 year ago)
- Last Synced: 2025-02-22T10:36:09.569Z (3 months ago)
- Language: TypeScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# ink-text-input-2 [![NPM version][npm-image]][npm-url]
> Text input component for [Ink](https://github.com/vadimdemedes/ink).
## Install
```
$ npm install ink-text-input-2
```
## Usage
```jsx
import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import TextInput from 'ink-text-input-2';
const SearchQuery = () => {
const [query, setQuery] = useState('');
return (
Enter your query:
);
};
render();
```
## 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.
```jsx
//=> "*****"
```
### 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](https://reactjs.org/docs/uncontrolled-components.html) 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.
```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 (
Enter your query:
);
};
render();
```
[npm-image]: https://img.shields.io/npm/v/ink-text-input-2.svg?style=flat
[npm-url]: https://npmjs.org/package/ink-text-input-2