Socket
Socket
Sign inDemoInstall

ink-quicksearch-input

Package Overview
Dependencies
6
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ink-quicksearch-input


Version published
Maintainers
1
Install size
963 kB
Created

Readme

Source

ink-quicksearch-input

QuickSearch Component for Ink 2

Forked from @aicioara's original ink-quicksearch component to upgrade it to Ink 2. Big thanks to him for laying out the original logic in v1! If you are looking for a component that works with Ink v1, that's where to go. This re-write uses modern React (e.g. function components and hooks), and it is also in Typescript, improving the developer experience. The only behavioral difference is that this component always filters out items which do not match the query.

Install

$ npm install ink-quicksearch-input

Quickstart

If you'd like to get a feel for how the component works, you can see the examples in action by running:

npm install
npm start

Usage

import React, { useState } from 'react';
import { render, Text } from 'ink';
import { QuickSearchInput } from 'ink-quicksearch-input';

const Demo = (props) => {
    const [result, setResult] = useState('');
    return (
        <>
        <Text>The user selected {result}.</Text>
        {'\n'}
        <QuickSearchInput 
            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) => setResult(item.label)} />
        </>
    )
}

render(<Demo/>);

Props

ParameterTypeDefaultDescription
itemsArray(object)[]Items to display in a list.
Each item must be an object and have at least a label prop.
onSelectfunctionFunction to call when user selects an item.
Item object is passed to that function as an argument.
focusbooleantrueListen 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.
caseSensitivebooleanfalseWhether or not quicksearch matching will be case sensitive.
limitint0Limit the number of rows to display. 0 is unlimited
Use in conjunction with https://www.npmjs.com/package/term-size.
forceMatchingQueryboolfalseIf 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.
clearQueryCharsArray(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) => {}).
initialSelectionIndexint0Selection 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.
labelstringOptionally provide a label which will appear before the current query.
indicatorComponentComponentCustom component to override the default indicator component (default - arrow).
itemComponentComponentCustom component to override the default item style (default - selection coloring).
highlightComponentComponentCustom component to override the default highlight style (default - background highlight).
statusComponentComponentCustom component to override the status component (default - current query, optional value label).

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
  • label: Optional string

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>
);

Keywords

FAQs

Last updated on 10 Dec 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc