Skip to main content

Channel

The Channel component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel. It provides five separate contexts to its children:

note

The Channel component renders an individual channel object. For detailed information regarding channel objects and their functionality, check out the JavaScript docs on our website.

Basic Usage#

The Channel component does not inject any UI, so its implementation is fairly simple and can be handled in one of two ways, both with and without a ChannelList component. If you are using a ChannelList, do not add a channel object as a prop on Channel. However in the absence of a ChannelList, the channel prop is required. By default, the ChannelList sets the active channel object, which is then injected it into the ChannelStateContext, so manual prop passing is not required.

Example 1 - without ChannelList

<Chat client={client}>
<Channel channel={channel}>
<MessageList />
<MessageInput />
</Channel>
</Chat>

Example 2 - with ChannelList

<Chat client={client}>
<ChannelList />
<Channel>
<MessageList />
<MessageInput />
</Channel>
</Chat>

Any child of the Channel component has access to the four contexts referenced above. Each context can be accessed with one of our custom hooks, which must be imported individually.

const { messages } = useChannelStateContext();
const { sendMessage } = useChannelActionContext();
const { Avatar } = useComponentContext();
const { typing } = useTypingContext();

Props#

channel#

The currently active StreamChat channel instance to be loaded into the Channel component and referenced by its children.

const channel = client.channel('messaging', {
members: ['nate', 'roy'],
});
caution

Do not provide this prop if you are using the ChannelList component, as it handles channel setting logic.

Type
object

acceptedFiles#

A list of accepted file upload types.

Type
string[]

activeUnreadHandler#

Custom handler function that runs when the active channel has unread messages (i.e., when chat is running on a separate browser tab).

Type
(unread: number, documentTitle: string) => void

Attachment#

Custom UI component to display a message attachment.

TypeDefault
componentAttachment

AutocompleteSuggestionHeader#

Custom UI component to override the default suggestion header component.

TypeDefault
componentHeader

AutocompleteSuggestionItem#

Custom UI component to override the default suggestion Item component.

TypeDefault
componentItem

AutocompleteSuggestionList#

Custom UI component to override the default List component that displays suggestions.

TypeDefault
componentList

Avatar#

Custom UI component to display a user's avatar.

TypeDefault
componentAvatar

CooldownTimer#

Custom UI component to display the slow mode cooldown timer.

TypeDefault
componentCooldownTimer

DateSeparator#

Custom UI component for date separators.

TypeDefault
componentDateSeparator

doMarkReadRequest#

Custom action handler to override the default channel.markRead request function (advanced usage only).

Type
function

doSendMessageRequest#

Custom action handler to override the default channel.sendMessage request function (advanced usage only).

Type
function

doUpdateMessageRequest#

Custom action handler to override the default client.updateMessage request function (advanced usage only).

Type
function

dragAndDropWindow#

If true, chat users will be able to drag and drop file uploads to the entire channel window.

TypeDefault
booleanfalse

EditMessageInput#

Custom UI component to override default edit message input.

TypeDefault
componentEditMessageForm

Emoji#

Custom UI component to override default NimbleEmoji from emoji-mart.

Type
component

emojiData#

Custom prop to override default facebook.json emoji data set from emoji-mart.

Type
object

EmojiIcon#

Custom UI component for emoji button in input.

TypeDefault
componentEmojiIconSmall

EmojiIndex#

Custom UI component to override default NimbleEmojiIndex from emoji-mart.

Type
component

EmojiPicker#

Custom UI component to override default NimblePicker from emoji-mart.

Type
component

EmptyPlaceholder#

Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component.

TypeDefault
componentnull

EmptyStateIndicator#

Custom UI component to be displayed when the MessageList or VirtualizedMessageList is empty.

TypeDefault
componentEmptyStateIndicator

FileUploadIcon#

Custom UI component for file upload icon.

TypeDefault
componentFileUploadIcon

GiphyPreviewMessage#

Custom UI component to render a Giphy preview in the VirtualizedMessageList.

TypeDefault
componentGiphyPreviewMessage

giphyVersion#

The Giphy version to render - check the keys of the Image Object for possible values.

TypeDefault
string'fixed_height'

HeaderComponent#

Custom UI component to render at the top of the MessageList.

TypeDefault
componentnone

Input#

Custom UI component handling how the message input is rendered.

TypeDefault
componentMessageInputFlat

LoadingErrorIndicator#

Custom UI component to be shown if the channel query fails.

TypeDefault
componentLoadingErrorIndicator

LoadingIndicator#

Custom UI component to render while the MessageList is loading new messages.

TypeDefault
componentLoadingIndicator

maxNumberOfFiles#

The maximum number of attachments allowed per message, defaults to the Stream Chat API maximum.

TypeDefault
number10

Message#

Custom UI component to display a message in the standard MessageList.

TypeDefault
componentMessageSimple

MessageDeleted#

Custom UI component for a deleted message.

TypeDefault
componentMessageDeleted

MessageListNotifications#

Custom UI component that displays message and connection status notifications in the MessageList.

TypeDefault
componentDefaultMessageListNotifications

MessageNotification#

Custom UI component to display a notification when scrolled up the list and new messages arrive.

TypeDefault
componentMessageNotification

MessageOptions#

Custom UI component for message options popup.

TypeDefault
componentMessageOptions

MessageRepliesCountButton#

Custom UI component to display message replies.

TypeDefault
componentMessageRepliesCountButton

MessageStatus#

Custom UI component to display message delivery status.

TypeDefault
componentMessageStatus

MessageSystem#

Custom UI component to display system messages.

TypeDefault
componentEventComponent

MessageTimestamp#

Custom UI component to display a timestamp on a message.

TypeDefault
componentMessageTimestamp

multipleUploads#

Whether to allow multiple attachment uploads on a message.

TypeDefault
booleantrue

onMentionsClick#

Custom action handler function to run on click of an @mention in a message.

Type
function

onMentionsHover#

Custom action handler function to run on hover of an @mention in a message.

Type
function

optionalMessageInputProps#

If dragAndDropWindow prop is true, the props to pass to the MessageInput component (overrides props placed directly on MessageInput).

Type
object

PinIndicator#

Custom UI component to override default pinned message indicator.

TypeDefault
componentPinIndicator

QuotedMessage#

Custom UI component to override quoted message UI on a sent message.

TypeDefault
componentQuotedMessage

QuotedMessagePreview#

Custom UI component to override the message input's quoted message preview.

TypeDefault
componentQuotedMessagePreview

ReactionSelector#

Custom UI component to display the reaction selector.

TypeDefault
componentReactionSelector

ReactionsList#

Custom UI component to display the list of reactions on a message.

TypeDefault
componentReactionsList

SendButton#

Custom UI component for send button.

TypeDefault
componentSendButton

skipMessageDataMemoization#

If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages).

TypeDefault
booleanfalse

ThreadHeader#

Custom UI component to display the header of a Thread.

TypeDefault
componentDefaultThreadHeader

ThreadStart#

Custom UI component to display the start of a threaded MessageList.

TypeDefault
componentDefaultThreadStart

TriggerProvider#

Optional context provider that lets you override the default autocomplete triggers.

TypeDefault
componentDefaultTriggerProvider

TypingIndicator#

Custom UI component for the typing indicator.

TypeDefault
componentTypingIndicator

VirtualMessage#

Custom UI component to display a message in the VirtualizedMessageList.

TypeDefault
componentFixedHeightMessage

Did you find this page helpful?