AutoCompleteInput

Component to render input box within the MessageInput. This component provides autocomplete functionality for the commands and mentions feature. Commands suggestions will show up when user types “/” while mentions suggestions will show up when user types “@.”

Check the Customize Message Input guide) for more details on how to customize this component

Props

additionalTextInputProps

Additional props provided to the underlying TextInput within MessageInput.

autoCompleteSuggestionsLimit

Maximum number of suggestions to display as part of autocomplete feature within input box.

closeSuggestions

Function to close the autocomplete suggestions popup.

giphyActive

True if a user selects the giphy command from commands list (which is shown when you type a / in the input box). This value is set back to false when the user sends the message for searching Giphy.

giphyEnabled

Enable Giphy commands feature on the MessageInput component.

maxMessageLength

Maximum length of the message text. The default value is supplied by the channel config.

numberOfLines

Maximum number of lines that underlying TextInput component within MessageInput should expand to.

mentionAllAppUsersEnabled

Allows any of the app users to be mentioned in a message, as part of autocomplete feature within input box. By default only members of channel can be mentioned while composing a message.

mentionAllAppUsersQuery

Query to be used for searching users as part of autocomplete mention feature within input box. Please check the Querying Users docs for more details on filters/sort/options.

mentionAllAppUsersQuery={{
  filters: {
    id: {
      $in: ['vishal', 'lucas']
    }
  },
  sort: {},
  options: {}
}}

onChange

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.

setGiphyActive

Setter function for giphyActive

setInputBoxRef

Setter function for inputBoxRef

setShowMoreOptions

Setter function for showMoreOptions.

text

Text message entered by user in underlying TextInput within MessageInput component. This value is attached to TextInput’s value prop

triggerSettings

Trigger settings for the auto complete input.

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.