iti

ink-text-input

Text input component for Ink

Showing:

Popularity

Downloads/wk

161K

GitHub Stars

97

Maintenance

Last Commit

1yr ago

Contributors

12

Package

Dependencies

2

Size (min+gzip)

8.4KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

ink-text-input test

Text input component for Ink.

Looking for a version compatible with Ink 2.x? Check out this release.

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.

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.

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 />);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial