https://github.com/maticzav/ink-autocomplete
🧠An autocomplete component for Ink.
https://github.com/maticzav/ink-autocomplete
autocomplete cli ink ink-autocomplete react
Last synced: about 11 hours ago
JSON representation
🧠An autocomplete component for Ink.
- Host: GitHub
- URL: https://github.com/maticzav/ink-autocomplete
- Owner: maticzav
- Created: 2017-08-27T16:00:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T23:14:31.000Z (over 2 years ago)
- Last Synced: 2025-09-04T08:01:57.228Z (about 1 month ago)
- Topics: autocomplete, cli, ink, ink-autocomplete, react
- Language: JavaScript
- Homepage:
- Size: 782 KB
- Stars: 82
- Watchers: 2
- Forks: 5
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# ink-autocomplete [](https://travis-ci.org/maticzav/ink-autocomplete)
> Autocomplete component for [Ink](https://github.com/vadimdemedes/ink).
## Install
```
$ npm install ink-autocomplete
```
## Usage
__Use arrows to navigate up and down and press enter to submit.__
```jsx
import {h, render, Component, Text} from 'ink'
import AutoComplete from 'ink-autocomplete'
// Demo
class Demo extends Component {
constructor() {
super()
this.state = {
value: '',
selected: null
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
render(props, {value, selected}) {
const countries = [
{
label: 'United Kingdom',
value: {country: 'United Kingdom', capital: 'London'}
},
{
label: 'United States',
value: {country: 'United States', capital: 'Washington DC'}
},
{
label: 'United Arab Emirates',
value: {country: 'United Arab Emirates', capital: 'Abu Dhabi'}
}
]
return (
{'Enter your country: '}
{ selected && (
The capital of your country is:
{selected.value.capital}
)}
)
}
handleChange(value) {
this.setState({
value,
selected: null
})
}
handleSubmit(selected) {
this.setState({
selected
})
}
}
// Ink
render()
```
## Props
#### value `string`
> Value of the input.
#### placeholder `string`
> String displayed when the input is empty.
#### items `array`
> A list of all items. Each item must include `label` and `value` property.
#### getMatch `string => item => bool`
> Called to determine which items satisfy the input.
#### onChange `function string => ()`
> Called each time input is changed.
#### onSubmit `function (item) => ()`
> Called once suggestion is selected.
#### indicatorComponent `Component`
> Custom component to override the default item component.
#### itemComponent `Component`
> Custom component to override the default item component.
## License
MIT © [Matic Zavadlal](http://github.com/maticzav)