ink-select-input-horizontal

Horizontal or Vertical select input component for Ink

This is a modified version of the original ink-select-input that returns the selectors horizontally or vertically and allows color customization.

note when requiring this package use:

	const SelectInput = require('ink-select-input').default

Looking for a version compatible with Ink 2.x? Check out this release.

Install

$ npm install ink-select-input-horizontal

Usage

1import React from 'react';
2import {render} from 'ink';
3import SelectInput from 'ink-select-input-horizontal';
4
5const Demo = () => {
6	const handleSelect = item => {
7		// `item` = { label: 'First', value: 'first' }
8	};
9
10	const items = [
11		{
12			label: 'First',
13			value: 'first'
14		},
15		{
16			label: 'Second',
17			value: 'second'
18		},
19		{
20			label: 'Third',
21			value: 'third'
22		}
23	];
24
25	return <SelectInput items={items} onSelect={handleSelect} />;
26};
27
28render(<Demo />);

Props

items

Type: array
Default: []

Items to display in a list. Each item must be an object and have label and value props, it may also optionally have a key prop. If no key prop is provided, value will be used as the item key.

isFocused

Type: boolean
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 Default: 0

Index of initially-selected item in items array.

limit

Type: number

Number of items to display.

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.