ink-select

Select Component for Ink

Demo

Install

$ npm install ink-select

Usage

1const {h, Component, render, Text} = require('ink');
2const {Select, Option, Separator} = require('../lib');
3
4class Example extends Component {
5  render() {
6    return (
7      <div>
8        <Select onSelect={item => this.setState({message: item + ' was selected'})}>
9          <Option value='1'>One</Option>
10
11          <Separator />
12
13          <Option value='2' onSelect={() => this.setState({message: 'Action for Two'})}>Two</Option>
14
15          <Separator label='======' />
16
17          <Option value='3'>Three</Option>
18        </Select>
19        <br />
20        { this.state && this.state.message && <Text green>{this.state.message}</Text>}
21      </div>
22    );
23  }
24}
25
26const unmount = render(<Example />);

Or, if you want to pass options as an array to get the same result:

1const {h, Component, render, Text} = require('ink');
2const {Select, Option, Separator} = require('../lib');
3
4class Example extends Component {
5  render() {
6    const options = [
7      { label: 'One', value: 1 },
8      { },
9      { label: 'Two', value: 2, onSelect: () => this.setState({message: 'Action for Two'})},
10      { label: '======' },
11      { label: 'Three', value: 3 }
12    ];
13
14    return (
15      <div>
16        <Select options={options} onSelect={item => this.setState({message: item + ' was selected'})}/>
17        <br />
18        { this.state && this.state.message && <Text green>{this.state.message}</Text>}
19      </div>
20    );
21  }
22}
23
24const unmount = render(<Example />);

Where any item that has no value key will be a separator. If label is passed it will be used, otherwise it will use the default.

Props

Select

cursorCharacter

Type: string Default: ❯

This character is used for the cursor.

onChange(value)

Type: Function

Function to call when the cursor is moved up or down.

onSelect(value)

Type: Function

Function to call when an item is selected by pressing Enter/Space

Option

value

Type: any Required

Is passed to onChange and onSelect when this item is selected

Separator

label

Type: string Default: —————

Text to be used as the separator

Key bindings

key	action
Space	select option
Enter	select option
↑	move the cursor up
↓	move the cursor down

Related

• ink-select-input - Alternative Select input component
• ink-scrollbar - Scrollbar component

LICENSE

MIT © 2018 George Karagkiaouris