A typescript rewrite of the react-typehead npm package
npm install @gforge/react-typeahead-ts
> A typeahead/autocomplete component for React
@gforge/react-typeahead-ts is a TypeScript
(a superset of JavaScript) library that provides a react-based
typeahead, or autocomplete text entry, as well as a "typeahead tokenizer",
a typeahead that allows you to select multiple results. It can be used
with regular JavaScript usin standard syntax although TypeScript is
recommended as the library has dropped the deprecated prop-types.
The project is a fork from the react-typeahead
as suggested by the name.
For a typeahead input:
``javascript`
import { Typeahead } from '@gforge/react-typeahead-ts';
React.render(
);
For a tokenizer typeahead input:
`javascript`
import { Tokenizer } from '@gforge/react-typeahead-ts';
React.render(
onTokenAdd={function(token) {
console.log('token added: ', token);
}}
/>
);
- [Package demo][1]
[1]: http://gforge.github.com/react-typeahead-ts
It is strongly recommended to look at the typescipt files in order to understand the API and what input is expected. The library is fully typed in the API and has a minimal reliance on any.
Type: React Component
Basic typeahead input and results list.
| Name | Type | Description |
| ----------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | String | If provided there will be a hidden input wiht a name with the selected value |Array
| options | | An array supplied to the filtering function. Can be a list of strings or a list of arbitrary objects. In the latter case, filterOption and displayOption should be provided. |String
| defaultValue | | A default value used when the component has no value. If it matches any options a option list will show. |String
| value | | Specify a value for the text input. |String
| initialValue | | The value when mounting |Number
| maxVisible | | Limit the number of options rendered in the results list. |String
| resultsTruncatedMessage | | If maxVisible is set, display this custom message at the bottom of the list of results when the result are truncated. |Object
| customClasses | | An object containing custom class names for child elements (see description below) |String
| placeholder | | Placeholder text for the typeahead input. |Boolean
| disabled | | Set to true to add disable attribute in the or