https://github.com/aicioara/ink-quicksearch
:black_nib: Quicksearch Input component for Ink
https://github.com/aicioara/ink-quicksearch
cli ink node-package react
Last synced: 2 months ago
JSON representation
:black_nib: Quicksearch Input component for Ink
- Host: GitHub
- URL: https://github.com/aicioara/ink-quicksearch
- Owner: aicioara
- License: mit
- Created: 2018-05-15T10:06:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-18T23:03:15.000Z (over 4 years ago)
- Last Synced: 2025-02-02T04:41:13.257Z (3 months ago)
- Topics: cli, ink, node-package, react
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 10
- Watchers: 1
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ink Quicksearch
> QuickSearch Component for [Ink](https://github.com/vadimdemedes/ink)
## Install
```
$ npm install ink-quicksearch
```
## Quickstart
```bash
npm install
npm start
```
## Usage
```jsx
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
}
}
render();
```
## 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
```jsx
// For the following four, whitespace is important
const IndicatorComponent = ({isSelected}) => {
return {isSelected ? '>' : ' '} ;
};
const ItemComponent = ({isSelected, children}) => (
{children}
);
const HighlightComponent = ({children}) => (
{children}
);
const StatusComponent = ({hasMatch, children}) => (
{children}
);
```