npm i react-typeahead-ts --save
The component has not full typeahead support. At this point there is just some basic functionality implemented. More functionality may be added in future. This example gives you a brief overview on what's actually implemented and how to use the component.
For every type you want to use in with the TypeAhead Component, you have to create a specific alias like:
let StringTypeAhead: new() => React.Component<ITypeAheadProps<string>,any> = TypeAhead
import * as React from 'react'
import {TypeAhead, ITypeAheadProps} from 'react-typeahead-ts'
let StringTypeAhead: new() => React.Component<ITypeAheadProps<string>,any> = TypeAhead
export class SampleForm extends React.Component<any, any>{
private options: Twitter.Typeahead.Options;
private data: Twitter.Typeahead.Dataset<string>;
componentWillMount(){
this.options = {
hint: true,
highlight: false,
minLength: 1
}
this.data = {
source: (queryObject, result) => result(['ABC', 'DEF', 'GHI'])
}
}
textChanged(event){
// handle the change event (eg. create an action)
}
textSelected(event){
// handle the selected event (eg. create an action)
}
render(){
return <form action="youraction">
<StringTypeAhead className='form-control'
placeholder='Your text'
data={this.data}
options={this.options}
onChange={this.textChanged.bind(this)}
onSelected={this.textSelected.bind(this)} />
</form>;
}
}