Skip to content
✒️ Quicksearch Input 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.
.circleci
bin Added dummy release script May 16, 2018
dist
examples
src Fixed eslint Jul 16, 2018
.eslintrc.js Eslint passes May 16, 2018
.gitignore
LICENSE
README.md Finished the documentation. Closes #1 Jul 16, 2018
package.json Uprev May 22, 2018

README.md

Ink Quicksearch

QuickSearch Component for Ink

CircleCI

Install

$ npm install ink-quicksearch

Quickstart

npm install
npm start

Usage

const {h, render, Component} = require('ink');
const QuickSearch = require('ink-quicksearch');

class Demo extends Component {
    render() {
        const props = {
            items: [
                {value: 1, label: 'Animal'},
                {value: 3, label: 'Antilope'},
                {value: 2, label: 'Animation'},
                {value: 0, label: 'Animate'},
                {value: 4, label: 'Arizona'},
                {value: 5, label: 'Aria'},
                {value: 6, label: 'Arid'},
            ],
            onSelect: item => {
                // `item` = { label: 'First', value: 'first' }
            };,
        };

        return <QuickSearch {...props} />
    }
}

render(<Demo/>);

Props

Parameter Type Default Description
items Array(object) [] Items to display in a list.
Each item must be an object and have at least a label prop.
onSelect function Function to call when user selects an item.
Item object is passed to that function as an argument.
focus boolean 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.
caseSensitive boolean false Whether or not quicksearch matching will be case sensitive.
limit int 0 Limit the number of rows to display. 0 is unlimited
Use in conjunction with https://www.npmjs.com/package/term-size.
forceMatchingQuery bool false If set to true, queries that return no results are not allowed. In particular, if previous query X returns at least one result and X + new_character would not, query will not update to X + new_character.
clearQueryChars Array(char) ['\u0015', '\u0017']
(Ctrl + u, Ctrl + w)
Key Combinations that will clear the query.
ch follows the keypress API process.stdin.on('keypress', (ch, key) => {}).
initialSelectionIndex int 0 Selection index when the component is initially rendered or when props.items changes. Can be set together with new props.items to automatically select an option.
indicatorComponent Component Custom component to override the default indicator component (default - arrow).
itemComponent Component Custom component to override the default item style (default - selection coloring).
highlightComponent Component Custom component to override the default highlight style (default - background highlight).
statusComponent Component Custom component to override the status component (default - current query).

Component Props

indicatorComponent

Type: Component
Props:

  • isSelected: boolean
  • isHighlighted: boolean
  • item: Object - The corresponding object inside props.items

itemComponent

Type: Component
Props:

  • isSelected: boolean
  • isHighlighted: boolean
  • item: Object - The corresponding object inside props.items
  • children: any

highlightComponent

Type: Component
Props:

  • isSelected: boolean
  • isHighlighted: boolean
  • item: Object - The corresponding object inside props.items
  • children: any

statusComponent

Type: Component
Props:

  • hasMatch: boolean
  • children: any

Default Components

// For the following four, whitespace is important
const IndicatorComponent = ({isSelected}) => {
    return <Color hex="#00FF00">{isSelected ? '>' : ' '} </Color>;
};

const ItemComponent = ({isSelected, children}) => (
    <Color hex={isSelected ? '#00FF00' : ''}>{children}</Color>
);

const HighlightComponent = ({children}) => (
    <Color bgHex="#6C71C4">{children}</Color>
);

const StatusComponent = ({hasMatch, children}) => (
    <Color hex={hasMatch ? '#00FF00' : '#FF0000'}>{children}</Color>
);
You can’t perform that action at this time.