ink-quicksearch-input

> QuickSearch Component for Ink 4

Refactored version of John's ink-quicksearch-input

Install

``
$ npm install @inkkit/ink-quicksearch-input
`

Usage

`jsx
import React, { useState } from 'react';
import { render, Text, Box } from 'ink';
import { QuickSearchInput } from '@inkkit/ink-quicksearch-input';

const Demo = (props) => {
const [result, setResult] = useState('');
return (
<>
The user selected {result}.

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();
`

Props

| Parameter | Type | Default | Description
| --- | --- | --- | --- |
| items | Array(object) | [] | Items to display in a list.
Each item must be an object and have at least a label prop.
| onSelect | function | | Function to call when user selects an item.
Item object is passed to that function as an argument.
| focus | boolean | 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.
| caseSensitive | boolean | false | Whether or not quicksearch matching will be case sensitive.
| limit | int | 0 | Limit the number of rows to display. 0 is unlimited
Use in conjunction with https://www.npmjs.com/package/term-size.
| forceMatchingQuery | bool | false | If set to true, queries that return no results are not allowed. In particular, if previous query X returns at least one result and X + new_character would not, query will not update to X + new_character.
| clearQueryChars | Array(char) | ['\u0015', '\u0017']
(Ctrl + u, Ctrl + w) | Key Combinations that will clear the query.
ch follows the keypress API process.stdin.on('keypress', (ch, key) => {}).
| initialSelectionIndex | int | 0 | Selection index when the component is initially rendered or when props.items changes. Can be set together with new props.items to automatically select an option.
| label | string | | Optionally provide a label which will appear before the current query.
| indicatorComponent | Component | | Custom component to override the default indicator component (default - arrow).
| itemComponent | Component | | Custom component to override the default item style (default - selection coloring).
| highlightComponent | Component | | Custom component to override the default highlight style (default - background highlight).
| statusComponent | Component | | Custom component to override the status component (default - current query, optional value label).

Component Props

$3

Type: Component

Props:

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

$3

Type: Component

Props:

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

$3

Type: Component

Props:

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

$3

Type: Component

Props:

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

Default Components

`jsx
// For the following four, whitespace is important
const IndicatorComponent = ({isSelected}) => {
return {isSelected ? '>' : ' '} ;
};

const ItemComponent = ({isSelected, children}) => (
{children}
);

const HighlightComponent = ({children}) => (
{children}
);

const StatusComponent = ({hasMatch, children}) => (
{children}
);
``