---
id: message_list_context
sidebar_position: 8
title: MessageListContext
---

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