Full rewrite for Ink 2, Hooks, & Typescript

.gitignore

@@ -1,5 +1,6 @@
 # IDE
 .idea
+.vscode
 
 # Build
 build/

README.md

@@ -1,17 +1,19 @@
-# Ink Quicksearch
+# ink-quicksearch-input
 
-> QuickSearch Component for [Ink](https://github.com/vadimdemedes/ink)
+> QuickSearch Component for [Ink 2](https://github.com/vadimdemedes/ink), [demo on repl.it](https://repl.it/@johnosullivan1/ink-quicksearch-input)
 
-![CircleCI](https://circleci.com/gh/aicioara/ink-quicksearch.png?style=shield&circle-token=:circle-token)
+Forked from [@aicioara](https://github.com/aicioara)'s original [`ink-quicksearch`](https://github.com/aicioara/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.  Note that the demo runs a good bit slower than it does in an actual terminal; there's some uncanny-valley lag which is not present during normal use.
 
 ## Install
 
 ```
-$ npm install ink-quicksearch
+$ 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:
+
 ```bash
 npm install
 npm start
@@ -20,28 +22,30 @@ npm start
 ## Usage
 
 ```jsx
-const {h, render, Component} = require('ink');
-const QuickSearch = require('ink-quicksearch');
-
-class Demo extends Component {
-    render() {
-        const props = {
-            items: [
+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 => {
-                // `item` = { label: 'First', value: 'first' }
-            };,
-        };
-
-        return <QuickSearch {...props} />
-    }
+                // ...
+            ]}
+            onSelect={(item) => setResult(item.label)} />
+        </>
+    )
 }
 
 render(<Demo/>);
@@ -60,10 +64,11 @@ render(<Demo/>);
 | 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']` <br> (<kbd>Ctrl</kbd> + <kbd>u</kbd>, <kbd>Ctrl</kbd> + <kbd>w</kbd>) | Key Combinations that will clear the query. <br> `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).
+| statusComponent | Component | | Custom component to override the status component (default - current query, optional value label).
 
 ## Component Props
 
@@ -106,6 +111,7 @@ Props:
 
 - `hasMatch`: `boolean`
 - `children`: `any`
+- `label`: Optional `string`