# MessageListContext

The context value is provided by `MessageListContextProvider`, which wraps the content rendered by [`MessageList`](/chat/docs/sdk/react/v13/components/core-components/message_list/). It exposes API used by default and custom components. Components that can consume `MessageListContext` include:

- `EmptyStateIndicator` - rendered when there are no messages in the channel. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#emptystateindicator/).
- `LoadingIndicator` - rendered while loading more messages to the channel. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#loadingindicator/).
- `MessageListNotifications` - component rendering application notifications. The [`component can be customized`](/chat/docs/sdk/react/v13/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/v13/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/v13/components/contexts/component_context#typingindicator/).
- `Message` and its children - component that renders a message. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#message/).
- `DateSeparator` - component rendered to separate messages posted on different dates. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#dateseparator/).
- `MessageSystem` - component to display system messages in the message list. The [`component can be customized`](/chat/docs/sdk/react/v13/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/v13/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/v13/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/v13/components/contexts/component_context#unreadmessagesseparator/).

## Best Practices

- Use context values instead of querying DOM elements directly.
- Keep custom components aligned with the default loading/empty states.
- Use `listElement` and `scrollToBottom` for custom scrolling UX.
- Avoid heavy logic inside list-level components to keep renders smooth.
- Treat notification components as transient UI and keep them lightweight.

## Basic Usage

Pull the value from context with our custom hook:

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

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

## Values

### listElement

The scroll container that renders messages and the typing indicator. You can use it to implement custom scroll behavior.

| Type                     |
| ------------------------ |
| `HTMLDivElement \| null` |

### scrollToBottom

Scrolls the `listElement` to the bottom.

| Type         |
| ------------ |
| `() => void` |


---

This page was last updated at 2026-04-21T07:55:45.040Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/contexts/message_list_context/](https://getstream.io/chat/docs/sdk/react/v13/components/contexts/message_list_context/).