@fforres/ink-quicksearch-input NPM

ink-quicksearch-input

QuickSearch Component for Ink 2, demo on repl.it

Forked from @Eximchain with some upgrades to make it Ink v3.x compatible.

This re-write uses modern React, some perf optimizations, typescript, exports type definitions and adds linting/prettier.

Install

$ npm install @fforres/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:

yarn
yarn dev

Usage

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

const Demo = (props) => {
  const [result, setResult] = useState("");
  return (
    <>
      <Text>The user selected {result}.</Text>
      <Newline />
      <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

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.
label	`string`		Optionally provide a label which will appear before the current query.
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, 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 <Text color="#00FF00">{isSelected ? ">" : " "} </Text>;
};

const ItemComponent = ({ isSelected, children }) => (
  <Text color={isSelected ? "#00FF00" : ""}>{children}</Text>
);

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

const StatusComponent = ({ hasMatch, children }) => (
  <Text color={hasMatch ? "#00FF00" : "#FF0000"}>{children}</Text>
);

ink ink-component

has-ansi keypress lodash.isequal

@everything-registry/sub-chunk-321 test_browserlistrc @zalastax/nolb-_ff @fforres/can-i-support @infinitebrahmanuniverse/nolb-_ff

1.0.1

3 years ago

1.0.0

3 years ago