Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vadimdemedes/ink-text-input
Text input component for Ink
https://github.com/vadimdemedes/ink-text-input
Last synced: 12 days ago
JSON representation
Text input component for Ink
- Host: GitHub
- URL: https://github.com/vadimdemedes/ink-text-input
- Owner: vadimdemedes
- License: mit
- Created: 2017-07-09T18:14:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-03T14:53:59.000Z (4 months ago)
- Last Synced: 2024-10-29T20:26:41.444Z (13 days ago)
- Language: TypeScript
- Size: 215 KB
- Stars: 146
- Watchers: 5
- Forks: 38
- Open Issues: 17
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# ink-text-input ![test](https://github.com/vadimdemedes/ink-text-input/workflows/test/badge.svg)
> Text input component for [Ink](https://github.com/vadimdemedes/ink).
## Install
```sh
npm install ink-text-input
```## Usage
```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 (
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();
```