Neoanthropic Preternatural Murmurings

    ink-text-input
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.1 • Public • Published

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

    Install

    npm i ink-text-input

    DownloadsWeekly Downloads

    90,674

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar