# ink-quicksearch

> Quicksearch Input Component for Ink

Latest version **0.3.2** (published 2018-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install ink-quicksearch
pnpm add ink-quicksearch
yarn add ink-quicksearch
bun add ink-quicksearch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2018-05-22 |
| First published | 2018-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 31.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Andrei Cioara |
| Maintainers | aicioara |
| Keywords | ink, ink-component |

## Links

- npm: https://www.npmjs.com/package/ink-quicksearch
- Repository: https://github.com/aicioara/ink-quicksearch
- Homepage: https://github.com/aicioara/ink-quicksearch#readme
- Issues: https://github.com/aicioara/ink-quicksearch/issues
- npm.io page: https://npm.io/package/ink-quicksearch

## Dependencies (2)

- [has-ansi](https://npm.io/package/has-ansi.md) 3.0.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) 4.5.0

## Recent versions

- 0.3.2 (latest) — 2018-05-22
- 0.3.1 — 2018-05-22
- 0.3.0 — 2018-05-22
- 0.2.2 — 2018-05-17
- 0.2.1 — 2018-05-17
- 0.2.0 — 2018-05-16
- 0.1.0 — 2018-05-16

## README

# Ink Quicksearch

> QuickSearch Component for [Ink](https://github.com/vadimdemedes/ink)

## Install

```
$ npm install ink-quicksearch
```

## Quickstart

```bash
npm install
npm start
```

## Usage

```jsx
const {h, render, Component} = require('ink');
const QuickSearch = require('ink-quicksearch');

class Demo extends Component {
    render() {
        const props = {
            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 => {
                // `item` = { label: 'First', value: 'first' }
            };,
        };

        return <QuickSearch {...props} />
    }
}

render(<Demo/>);
```


## Props



### items

Type: `array`<br>
Default: `[]`

Items to display in a list. Each item must be an object and have at least a `label` prop.



### onSelect

Type: `function`

Function to call when user selects an item. Item object is passed to that function as an argument.



### focus

Type: `boolean`<br>
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.



### caseSensitive

Type: `boolean`<br>
Default: `false`

Whether or not quicksearch matching will be case sensitive



### limit

Type: `int`<br>
Default: `0`

Limit the number of rows to display. `0` is unlimited <br>
Use in conjunction with https://www.npmjs.com/package/term-size



### forceMatchingQuery

Type: `bool`<br>
Default: `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

Type: `Array(char)`<br>
Default: `['\u0015', '\u0017']` (`Ctrl` + `u` | `Ctrl` + `w`)

Key Combinations that will clear the query. <br>
`ch` follows the `keypress` API `process.stdin.on('keypress', (ch, key) => {})`



### initialSelectionIndex

Type: `int`<br>
Default: `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.



### indicatorComponent

Type: `Component`<br>
Props:

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

Custom component to override the default indicator component (default - arrow).



### itemComponent

Type: `Component`<br>
Props:

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

Custom component to override the default item style (default - selection coloring).



### highlightComponent

Type: `Component`<br>
Props:

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

Custom component to override the default highlight style (default - background highlight).



### statusComponent

Type: `Component`<br>
Props:

- `hasMatch`: `boolean`
- `children`: `any`

Custom component to override the status component (default - current query).



## Default Components

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

---
_Source: https://npm.io/package/ink-quicksearch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._