Skip to main content
Version: v4

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
ComponentAutoCompleteSuggestionHeader

AutoCompleteSuggestionItem#

Component to render the autocomplete suggestion item.

TypeDefault
ComponentAutoCompleteSuggestionItem

AutoCompleteSuggestionList#

Component to render the autocomplete suggestion list.

TypeDefault
ComponentAutoCompleteSuggestionItem

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 params:

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

Did you find this page helpful?