Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/goto-bus-stop/react-abstract-autocomplete

Bring-Your-Own-UI autocomplete / mentions component for React.
https://github.com/goto-bus-stop/react-abstract-autocomplete

autocomplete autosuggest react react-components typeahead

Last synced: 27 days ago
JSON representation

Bring-Your-Own-UI autocomplete / mentions component for React.

Awesome Lists containing this project

README 

        
# react-abstract-autocomplete



> This component isn't very accessible and the API predates hooks, which makes it a bit awkward in modern React.

> I recommend building your own autocomplete on top of something like [downshift](https://github.com/downshift-js/downshift) instead.



Bring-Your-Own-UI autocomplete component for React.



[Examples] - [Examples source code] - [Installation] - [Usage] - [License]



## Installation



```bash

npm install --save react-abstract-autocomplete

```



## Usage



```js

import AutoComplete, { Completion } from 'react-abstract-autocomplete';



const users = [];

const chatCommands = [];



  

  



```



For full usage examples, check out the [Examples] page, and the projects

in the [examples/][Examples source code] directory.



### AutoComplete

| Name | Type | Default | Description |

|:-----|:-----|:-----|:-----|

| inputComponent | one of:
 string
 function
 | 'input' | Component to use for rendering the input element. Uses native `` by default.
The component should accept `value`, `onChange` and `onKeyDown` props. |

| inputProps | object | {  type: 'text',} | Props to pass to the input component. |

| renderSuggestion | function | `
{value}
` | Function that renders a single suggestion. This can be overridden for individual Completion types, in case they need custom rendering.

**Signature:**
`function(suggestion: Object) => ReactElement`
*suggestion:* Suggestion descriptor.
*suggestion.key:* Unique key for the suggestion element.     See [Dynamic Children](https://facebook.github.io/react/docs/multiple-components.html#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 | `
{suggestions}
` | Function that renders the suggestions list.

**Signature:**
`function(suggestions: Array) => ReactElement`
*suggestions:* 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) => void`
*newValue:* null |



### 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) => ReactElement`
*suggestion:* Suggestion descriptor.
*suggestion.key:* Unique key for the suggestion element.     See [Dynamic Children](https://facebook.github.io/react/docs/multiple-components.html#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) => undefined`
*matchingValue:* Current value to be completed, as     extracted using `props.regex`.
*props:* Props of this `` 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) => string`
*value:* Completion value.
*props:* Props of this `` element. |



## License



[MIT]



[Examples]: https://goto-bus-stop.github.io/react-abstract-autocomplete/examples

[Examples source code]: ./examples

[Installation]: #installation

[Usage]: #usage

[AutoComplete]: #autocomplete

[Completion]: #completion

[License]: #license

[Dynamic Children]: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

[MIT]: ./LICENSE