react-abstract-autocomplete
Bring-Your-Own-UI autocomplete component for React.
Examples - Examples source code - Installation - Usage - License
Installation
npm install --save react-abstract-autocompleteUsage
import AutoComplete, { Completion } from 'react-abstract-autocomplete';
const users = [];
const chatCommands = [];
<AutoComplete inputComponent="input">
<Completion trigger="@" completions={users} minLength={1} />
<Completion trigger="/" completions={chatCommands} minLength={1} />
</AutoComplete>For full usage examples, check out the Examples page, and the projects in the examples/ directory.
AutoComplete
| Name | Type | Default | Description |
|---|---|---|---|
| inputComponent | one of: string function |
'input' | Component to use for rendering the input element. Uses native <input /> by default.The component should accept value, onChange and onKeyDown props. |
| inputProps | object | { type: 'text',} | Props to pass to the input component. |
| renderSuggestion | function | <div key={key} onClick={select}>{value}</div> |
Function that renders a single suggestion. This can be overridden for individual Completion types, in case they need custom rendering. Signature: function(suggestion: Object) => ReactElementsuggestion: Suggestion descriptor. suggestion.key: Unique key for the suggestion element. See Dynamic Children for details. suggestion.value: Completion value of this suggestion. suggestion.selected: Whether this suggestion is currently selected. suggestion.select: Autocomplete this suggestion. |
| renderSuggestions | function | <div>{suggestions}</div> |
Function that renders the suggestions list. Signature: function(suggestions: Array) => ReactElementsuggestions: Array of children rendered by renderSuggestion. |
| children | node | [] | Completion types as <Completion /> elements. |
| limit | number | 15 | The maximum amount of suggestions to show. |
| value | string | Current string value of the input component. Optional, useful for controlled inputs. Passed down to the input component as the value prop. | |
| defaultValue | string | '' | Initial string value for uncontrolled inputs. |
| onUpdate | function | () => {} | Fired when the input component's value changes. Use this for controlled inputs. Signature: function(newValue: string) => voidnewValue: null |
Completion
<Completion /> elements describe different data sources. Multiple can be
used in the same <AutoComplete /> component.
| Name | Type | Default | Description |
|---|---|---|---|
| trigger (required) | one of: string RegExp |
String that triggers this completion type. | |
| minLength | number | 3 | Minimum amount of characters typed before suggestions will be given. |
| regex | RegExp | null | Regex to extract the current completion value from the input. Can also be used to "validate" the current completion value, so no suggestions will be provided if it's "invalid". Uses the first capture group as the value to be completed, or the full match if there are no capture groups. For example: - /.*(@.*?)$/ + "Hello @ReA" → "@ReA" - /\w+$/ + "This is sp" → "sp" |
| renderSuggestion | function | null | Function that renders a single suggestion. Signature: function(suggestion: Object) => ReactElementsuggestion: Suggestion descriptor. suggestion.key: Unique key for the suggestion element. See Dynamic Children for details. suggestion.value: Completion value of this suggestion. suggestion.selected: Whether this suggestion is currently selected. suggestion.select: Autocomplete this suggestion. |
| getCompletions | function | Searches the completions prop. |
Get an array of possible completions. Signature: function(matchingValue: string, props: Object) => undefinedmatchingValue: Current value to be completed, as extracted using props.regex.props: Props of this <Completion /> element. |
| completions | array | [] | Optional array of completion values. This can be used if all possible completions are known beforehand. If provided, a default getCompletions function that searches this array will be used. |
| getText | function | (value, { trigger }) => ${trigger}${value} |
Transform a completion value to a string that will be inserted into the input component. By default, uses `${props.trigger}${value} `. (Note the space at the end! If you want to add a space once a completion is inserted, add it here.)Signature: function(value: undefined, props: Object) => stringvalue: Completion value. props: Props of this <Completion /> element. |