Skip to content
Select Component for Ink
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
media
src
test/components
.gitignore
.travis.yml
README.md
package.json

README.md

ink-select Build Status XO code style

Select Component for Ink

Demo

Demo Image

Install

$ npm install ink-select

Usage

const {h, Component, render, Text} = require('ink');
const {Select, Option, Separator} = require('../lib');

class Example extends Component {
  render() {
    return (
      <div>
        <Select onSelect={item => this.setState({message: item + ' was selected'})}>
          <Option value='1'>One</Option>

          <Separator />

          <Option value='2' onSelect={() => this.setState({message: 'Action for Two'})}>Two</Option>

          <Separator label='======' />

          <Option value='3'>Three</Option>
        </Select>
        <br />
        { this.state && this.state.message && <Text green>{this.state.message}</Text>}
      </div>
    );
  }
}

const unmount = render(<Example />);

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

const {h, Component, render, Text} = require('ink');
const {Select, Option, Separator} = require('../lib');

class Example extends Component {
  render() {
    const options = [
      { label: 'One', value: 1 },
      { },
      { label: 'Two', value: 2, onSelect: () => this.setState({message: 'Action for Two'})},
      { label: '======' },
      { label: 'Three', value: 3 }
    ];

    return (
      <div>
        <Select options={options} onSelect={item => this.setState({message: item + ' was selected'})}/>
        <br />
        { this.state && this.state.message && <Text green>{this.state.message}</Text>}
      </div>
    );
  }
}

const 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

LICENSE

MIT © 2018 George Karagkiaouris

You can’t perform that action at this time.