ink-multi-select

Multi-Select input component for Ink

Refactored version of George's ink-multi-select

Install

$ npm install @deralaxo/ink-multi-select

Usage

1import React from "react";
2import { render } from "ink";
3import MultiSelect from "@deralaxo/ink-multi-select";
4
5const Demo = () => {
6  const handleSubmit = (items) => {
7    // `items` = [{ label: 'First', value: 'first' }, { label: 'Third', value: 'third' }]
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 <MultiSelect items={items} onSubmit={handleSubmit} />;
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, label will be used as the item key.

defaultSelected

Type: array
Default: []

List of initial selected items (this works only when selected is undefined).

focus

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.

onSelect

Type: function

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

onUnselect

Type: function

Function to call when user unselects 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.

onSubmit

Type: function

Function to call when user submits the selected list. Array of Item objects is passed to that function as an argument.

indicatorComponent

Type: Component

Custom component to override the default indicator component.

checkboxComponent

Type: Component

Custom component to override the default check-box component.

itemComponent

Type: Component

Custom component to override the default item component.

limit

Type: number

Number of items to display."