Skip to main content
Version: v5

SuggestionsContext

SuggestionsContext is provided by Channel component, to provide necessary values for managing autocomplete feature on underlying MessageInput component.

Value

AutoCompleteSuggestionHeader

Component to render the autocomplete suggestion header.

TypeDefault
ComponentTypeAutoCompleteSuggestionHeader

AutoCompleteSuggestionItem

Component to render the autocomplete suggestion item.

TypeDefault
ComponentTypeAutoCompleteSuggestionItem

AutoCompleteSuggestionList

Component to render the autocomplete suggestion list.

TypeDefault
ComponentTypeAutoCompleteSuggestionList

closeSuggestions

Function to close the autocomplete suggestions popup.

Type
function

openSuggestions

Function to open the autocomplete suggestions popup. This function takes following two parameters:

  • component - You can either pass a string or a react element.
    • string - enum('MentionsItem' | 'CommandsItem' | 'EmojisItem'). Based on value, one of the default components will be rendered as list item within suggestions list.
    • element - React element which takes item as a prop, which is a suggestion item within list set using updateSuggestions. This element is used to render item in the suggestions list.
  • title - component to render a title for suggestions list.
Type
function

queryText

The text which the user types in the message input to get autocomplete suggestions.

Type
string

suggestions

Current active list of suggestions, within suggestions list for autocomplete feature.

Type
{ data: array<object>, onSelect: function, queryText: string }

suggestionsTitle

Title component of current active suggestions autocomplete list.

Type
string | Element

suggestionsViewActive

Weather the autocomplete suggestions list is open or not.

Type
boolean

triggerType

The trigger type triggers a particular type of autocomplete list depending on user input.

Type
'command' | 'emoji' | 'mention'

updateSuggestions

Update the suggestions in autocomplete suggestions list. This function takes following two parameters:

  • suggestions - { data: array<object>, onSelect: function }
  • title - new title component for suggestions list.
Type
function

Did you find this page helpful?