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](Customize Message Input) for more details on how to customize this component

Props

cooldownActive

Whether there is currently a cool-down active in a channel with slow mode enabled.

type	default
boolean	false

overrides the value from MessageInputContext

additionalTextInputProps

Additional props provided to the underlying TextInput within MessageInput.

Type
object

overrides the value from MessageInputContext

autoCompleteSuggestionsLimit

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

Type	Default
number	10

overrides the value from SuggestionsContext

closeSuggestions

Function to close the autocomplete suggestions popup.

Type
function

overrides the value from MessageInputContext

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.

Type
boolean

overrides the value from ChannelContext

giphyEnabled

Enable Giphy commands feature on the MessageInput component.

Type	Default
boolean	true

overrides the value from MessageInputContext

maxMessageLength

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

Type
number

overrides the value from MessageInputContext

numberOfLines

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

Type	Default
number	5

overrides the value from MessageInputContext

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.

Type	Default
boolean	false

overrides the value from MessageInputContext

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: {}
}}

Type
object

overrides the value from MessageInputContext

onChange

overrides the value from SuggestionsContext

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

overrides the value from MessageInputContext

setGiphyActive

Setter function for giphyActive

Type
(isActive) => void

overrides the value from MessageInputContext

setInputBoxRef

Setter function for inputBoxRef

Type
(ref) => void

overrides the value from MessageInputContext

setShowMoreOptions

Setter function for showMoreOptions.

Type
(showMoreOptions) => void

overrides the value from MessageInputContext

text

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

Type
string

overrides the value from MessageInputContext

triggerSettings

Trigger settings for the auto complete input.

Type	Default
object	TriggerSettings

overrides the value from SuggestionsContext

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