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
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 usingupdateSuggestions
. This element is used to render item in the suggestions list.
- string -
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 |