# MessageListContext

The context value is provided by `MessageListContextProvider` which wraps the contents rendered by [`MessageList`](/chat/docs/sdk/react/v11/components/core-components/message-list/). 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. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#emptystateindicator/).
- `LoadingIndicator` - rendered while loading more messages to the channel. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#loadingindicator/).
- `MessageListNotifications` - component rendering application notifications. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#messagelistnotifications/).
- `MessageNotification` - component used to display a single notification message in `MessageListNotifications`. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#messagenotification/).
- `TypingIndicator` - component indicating that another user is typing a message in a given channel. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#typingindicator/).
- `Message` and its children - component to render a message. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#message/).
- `DateSeparator` - component rendered to separate messages posted on different dates. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#dateseparator/).
- `MessageSystem` - component to display system messages in the message list. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#messagesystem/).
- `HeaderComponent` - component to be displayed before the oldest message in the message list. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#headercomponent/).
- `UnreadMessagesNotification` - custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#unreadmessagesnotification/).
- `UnreadMessagesSeparator` - component to be displayed before the oldest message in the message list. The [`component can be customized`](/chat/docs/sdk/react/v11/components/contexts/component-context#unreadmessagesseparator/).

## Basic Usage

Pull the value from context with our custom hook:

```jsx
import { useMessageListContext } from "stream-chat-react";

export const CustomComponent = () => {
  const { listElement, scrollToBottom } = useMessageListContext();
  // component logic ...
  return {
    /* rendered elements */
  };
};
```

## 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` |


---

This page was last updated at 2026-05-22T16:32:10.754Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/components/contexts/message-list-context/](https://getstream.io/chat/docs/sdk/react/v11/components/contexts/message-list-context/).