# MessageListContext

`MessageListContext` is provided by `MessageListContextProvider`, which wraps the content rendered by [`MessageList`](/chat/docs/sdk/react/components/core-components/message-list/).

Components rendered inside `MessageList` can use this context for list-level behaviors such as custom scrolling and access to processed list items.

## Best Practices

- Use the context helpers instead of querying DOM nodes manually.
- Keep custom list-level UI lightweight so scrolling stays smooth.
- Use `processedMessages` when your custom component needs access to the enriched list rather than the raw channel messages.
- Prefer `scrollToBottom()` over direct DOM scroll manipulation.
- Keep notification UI separate from list-processing logic.

## Basic Usage

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

const CustomComponent = () => {
  const { listElement, processedMessages, scrollToBottom } =
    useMessageListContext();

  return (
    <div>
      <button onClick={scrollToBottom}>Jump to bottom</button>
      <div>{processedMessages.length}</div>
      <div>{Boolean(listElement) ? "mounted" : "not mounted"}</div>
    </div>
  );
};
```

## Components That Commonly Consume MessageListContext

- `TypingIndicator`
- custom list headers or footers
- custom controls that need to scroll to the bottom
- custom unread or notification UI rendered within the list subtree

## Values

| Value               | Description                                                                                                              | Type                     |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------ |
| `listElement`       | The scroll container that renders the messages and typing indicator.                                                     | `HTMLDivElement \| null` |
| `processedMessages` | The enriched message list used by the renderer. This includes injected items such as date separators and intro messages. | `RenderedMessage[]`      |
| `scrollToBottom`    | Scrolls the current list element to the bottom.                                                                          | `() => void`             |


---

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

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