# ink-multicolumn-select-input

> Multi-column select input component for Ink

Latest version **0.5.2** (published 2023-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install ink-multicolumn-select-input
pnpm add ink-multicolumn-select-input
yarn add ink-multicolumn-select-input
bun add ink-multicolumn-select-input
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.2 |
| Published | 2023-02-06 |
| First published | 2023-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Chung Leong |
| Maintainers | cleong |
| Keywords | ink, ink-component |

## Links

- npm: https://www.npmjs.com/package/ink-multicolumn-select-input
- Repository: https://github.com/chung-leong/ink-multicolumn-select-input
- Homepage: https://github.com/chung-leong/ink-multicolumn-select-input#readme
- Issues: https://github.com/chung-leong/ink-multicolumn-select-input/issues
- npm.io page: https://npm.io/package/ink-multicolumn-select-input

## Recent versions

- 0.5.2 (latest) — 2023-02-06
- 0.5.1 — 2023-02-05
- 0.5.0 — 2023-02-05
- 0.0.1 — 2023-02-05

## README

# ink-multicolumn-select-input ![ci](https://img.shields.io/github/actions/workflow/status/chung-leong/ink-multicolumn-select-input/node.js.yml?branch=main&label=Node.js%20CI&logo=github) ![nycrc config on GitHub](https://img.shields.io/nycrc/chung-leong/ink-multicolumn-select-input)

Multi-column select input component for [Ink](https://github.com/vadimdemedes/ink)

![Screenshot](./screenshot.png)

## Install

```
$ npm install ink-multicolumn-select-input
```

## Usage

```jsx
import React from 'react';
import {render} from 'ink';
import MulticolumnSelectInput from 'ink-multicolumn-select-input';

const Demo = () => {
  const handleSelect = item => {
    // `item` = { label: 'First', value: 'first' }
  };

  const items = [];
  for (let i = 1; i <= 150; i++) {
    const filename = `filename${i}.ext`;
    items.push({ label: filename, value: filename });
  }

  return <MulticolumnSelectInput items={items} columnCount={3} onSelect={handleSelect} />;
};

render(<Demo />);
```

## Props

### items

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

Items to display in a list. Each item must be an object and have `label` and `value` props.

### isFocused

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.

### initialIndex

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

Index of initially-selected item in `items` array.

### limit

Type: `number`<br>
Default: `24`

Number of items in a column. Determines the height of the component.

### columnCount

Type: `number`<br>
Default: `3`

Number of columns.

### width

Type: `number` | `string`<br>
Default: `"100%"`

The width of the component. 

### indicatorComponent

Type: `Component`

Custom component to override the default indicator component.

### itemComponent

Type: `Component`

Custom component to override the default item component.

### onSelect

Type: `function`

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

### onHighlight

Type: `function`

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

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