# ChannelActionContext

`ChannelActionContext` is provided by [`Channel`](/chat/docs/sdk/react/v13/components/core-components/channel/) and exposes action handlers for the active channel. Access it with `useChannelActionContext`.

## Best Practices

- Use context actions instead of calling client APIs directly to keep UI state in sync.
- Wrap action calls in user-initiated events to avoid accidental side effects.
- Prefer `jumpToFirstUnreadMessage`/`jumpToLatestMessage` for navigation to keep list state consistent.
- Treat `markRead` as the single source of read-state updates to avoid double-counting.
- Debounce or throttle custom action triggers to prevent rapid re-queries.

## Basic Usage

Pull values from `ChannelActionContext` with our custom hook:

```tsx
const { closeThread, loadMoreThread } = useChannelActionContext();
```

## Values

### addNotification

Adds a temporary notification to `MessageList` (removed after ~5 seconds).

| Type                                                 |
| ---------------------------------------------------- |
| `(text: string, type: 'success' \| 'error') => void` |

### closeThread

The function to close the currently open `Thread`.

| Type                                         |
| -------------------------------------------- |
| `(event?: React.BaseSyntheticEvent) => void` |

### deleteMessage

The function to trigger the delete message request.

| Type                                                                       |
| -------------------------------------------------------------------------- |
| `(message: LocalMessage, options?: DeleteMessageOptions) => Promise<void>` |

### dispatch

The dispatch function for the [`ChannelStateReducer`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/channelState.ts).

| Type                      |
| ------------------------- |
| ChannelStateReducerAction |

### editMessage

A function that takes a message to be edited, returns a Promise.

| Type                                                             |
| ---------------------------------------------------------------- |
| `(message: UpdatedMessage) => Promise<UpdateMessageAPIResponse>` |

### jumpToFirstUnreadMessage

Jumps to the first unread message. If not found locally, it can query around that message using `queryMessageLimit`. Falls back to the last read message when available.

| Type                                            |
| ----------------------------------------------- |
| `(queryMessageLimit?: number) => Promise<void>` |

### jumpToLatestMessage

Restores the list to the most recent messages after `jumpToMessage`.

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

### jumpToMessage

`jumpToMessage` scrolls to the message with the given `messageId`.
Here's an example of a button, which, when clicked, searches for a given message and navigates to it:

```tsx
const JumpToMessage = () => {
  const { jumpToMessage } = useChannelActionContext();

  return (
    <button
      data-testid="jump-to-message"
      onClick={async () => {
        // the filtering based on channelId is just for example purposes.
        const results = await chatClient.search(
          {
            id: { $eq: channelId },
          },
          "Message 29",
          { limit: 1, offset: 0 },
        );

        jumpToMessage(results.results[0].message.id);
      }}
    >
      Jump to message 29
    </button>
  );
};

// further down the line, add the JumpToMessage to the component tree as a child of `Channel`
// ...
return (
  <Channel channel={channel}>
    <JumpToMessage />
    <Window>
      <MessageList />
    </Window>
  </Channel>
);
```

| Type                                   |
| -------------------------------------- |
| `(messageId: string) => Promise<void>` |

### loadMore

Loads the next page of messages (pagination).

| Type                                  |
| ------------------------------------- |
| `(limit?: number) => Promise<number>` |

### loadMoreNewer

Loads newer messages (pagination).

| Type                                  |
| ------------------------------------- |
| `(limit?: number) => Promise<number>` |

### loadMoreThread

Loads the next page of thread messages (pagination).

| Type                                  |
| ------------------------------------- |
| `(limit?: number) => Promise<number>` |

### markRead

Throttled function that marks the channel read and updates local state. Configure behavior via the `options` parameter (`MarkReadWrapperOptions`):

| Field                        | Type      | Optional | Description                                                                                                                                                           |
| ---------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `updateChannelUiUnreadState` | `boolean` | yes      | Whether `channelUnreadUiState` should update. The local update is prevented on initial `Channel` mount to preserve the original unread indicator. Defaults to `true`. |

| Type                                         |
| -------------------------------------------- |
| `(options?: MarkReadWrapperOptions) => void` |

### onMentionsClick

Runs when an @mention is clicked; receives the DOM event and mentioned users.

| Type                                                              |
| ----------------------------------------------------------------- |
| `(event: React.BaseSyntheticEvent, user: UserResponse[]) => void` |

### onMentionsHover

Runs when an @mention is hovered; receives the DOM event and mentioned users.

| Type                                                              |
| ----------------------------------------------------------------- |
| `(event: React.BaseSyntheticEvent, user: UserResponse[]) => void` |

### openThread

Opens a thread for the parent message (optionally with the click event).

| Type                                                                |
| ------------------------------------------------------------------- |
| `(message: LocalMessage, event?: React.BaseSyntheticEvent) => void` |

### removeMessage

The function to remove a `message` from `MessageList`, handled by the `Channel` component. Takes a `message` object.

| Type                              |
| --------------------------------- |
| `(message: LocalMessage) => void` |

### retrySendMessage

The function to resend a `message`, handled by the `Channel` component.

| Type                                       |
| ------------------------------------------ |
| `(message: LocalMessage) => Promise<void>` |

### sendMessage

The function to send a `message` on `Channel`. Takes a `message` object with the basic message information as the first argument, and custom data as the second argument.

| Type                                                                                                |
| --------------------------------------------------------------------------------------------------- |
| `(message: MessageToSend, customMessageData?: Partial<Message>) => Promise<SendMessageAPIResponse>` |

### updateMessage

The function to update a `message` on `Channel`, takes a `message` object.

| Type                              |
| --------------------------------- |
| `(message: LocalMessage) => void` |


---

This page was last updated at 2026-04-21T09:53:41.421Z.

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