ink-quicksearch-input v1.0.0

ink-quicksearch-input

QuickSearch Component for Ink 2

Forked from @aicioara's original ink-quicksearch component to upgrade it to Ink 2. Big thanks to him for laying out the original logic in v1! If you are looking for a component that works with Ink v1, that's where to go. This re-write uses modern React (e.g. function components and hooks), and it is also in Typescript, improving the developer experience. The only behavioral difference is that this component always filters out items which do not match the query.

Install

$ npm install ink-quicksearch-input

Quickstart

If you'd like to get a feel for how the component works, you can see the examples in action by running:

npm install
npm start

Usage

import React, { useState } from 'react';
import { render, Text } from 'ink';
import { QuickSearchInput } from 'ink-quicksearch-input';

const Demo = (props) => {
    const [result, setResult] = useState('');
    return (
        <>
        <Text>The user selected {result}.</Text>
        {'\n'}
        <QuickSearchInput 
            items={[
                {value: 1, label: 'Animal'},
                {value: 3, label: 'Antilope'},
                {value: 2, label: 'Animation'},
                {value: 0, label: 'Animate'},
                {value: 4, label: 'Arizona'},
                {value: 5, label: 'Aria'},
                {value: 6, label: 'Arid'},
                // ...
            ]}
            onSelect={(item) => setResult(item.label)} />
        </>
    )
}

render(<Demo/>);

Props

Component Props

indicatorComponent

Type: Component Props:

• isSelected: boolean
• isHighlighted: boolean
• item: Object - The corresponding object inside props.items

itemComponent

Type: Component Props:

• isSelected: boolean
• isHighlighted: boolean
• item: Object - The corresponding object inside props.items
• children: any

highlightComponent

Type: Component Props:

• isSelected: boolean
• isHighlighted: boolean
• item: Object - The corresponding object inside props.items
• children: any

statusComponent

Type: Component Props:

• hasMatch: boolean
• children: any
• label: Optional string

Default Components

// For the following four, whitespace is important
const IndicatorComponent = ({isSelected}) => {
    return <Color hex="#00FF00">{isSelected ? '>' : ' '} </Color>;
};

const ItemComponent = ({isSelected, children}) => (
    <Color hex={isSelected ? '#00FF00' : ''}>{children}</Color>
);

const HighlightComponent = ({children}) => (
    <Color bgHex="#6C71C4">{children}</Color>
);

const StatusComponent = ({hasMatch, children}) => (
    <Color hex={hasMatch ? '#00FF00' : '#FF0000'}>{children}</Color>
);