import { useMessageListContext } from 'stream-chat-react';
export const CustomComponent = () => {
const { listElement, scrollToBottom } = useMessageListContext();
// component logic ...
return(
{/* rendered elements */}
);
}
This is documentation for
Stream Chat React SDK v11, which is no longer actively maintained. For up-to-date documentation, see the latest version (v12).
MessageListContext
The context value is provided by MessageListContextProvider
which wraps the contents rendered by MessageList
. It exposes API that the default and custom components rendered by MessageList
can take advantage of. The components that can consume the context are:
EmptyStateIndicator
- rendered when there are no messages in the channel. Thecomponent can be customized
.LoadingIndicator
- rendered while loading more messages to the channel. Thecomponent can be customized
.MessageListNotifications
- component rendering application notifications. Thecomponent can be customized
.MessageNotification
- component used to display a single notification message inMessageListNotifications
. Thecomponent can be customized
.TypingIndicator
- component indicating that another user is typing a message in a given channel. Thecomponent can be customized
.Message
and its children - component to render a message. Thecomponent can be customized
.DateSeparator
- component rendered to separate messages posted on different dates. Thecomponent can be customized
.MessageSystem
- component to display system messages in the message list. Thecomponent can be customized
.HeaderComponent
- component to be displayed before the oldest message in the message list. Thecomponent can be customized
.UnreadMessagesNotification
- custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls toUnreadMessagesSeparator
. Thecomponent can be customized
.UnreadMessagesSeparator
- component to be displayed before the oldest message in the message list. Thecomponent can be customized
.
Basic Usage
Pull the value from context with our custom hook:
Value
listElement
The scroll container within which the messages and typing indicator are rendered. You may want to perform scroll-to-bottom operations based on the listElement
’s scroll state.
Type |
---|
HTMLDivElement | null |
scrollToBottom
Function that scrolls the listElement
to the bottom.
Type |
---|
() => void |
On this page: