---
id: channel_action_context
title: ChannelActionContext
---

The `ChannelActionContext` is one of the context providers exposed in the [`Channel`](../core-components/channel.mdx) component and is consumable by all of the `Channel` children components. The context provides all of the action properties and handlers for a `channel`,
and you can access these by calling the `useChannelActionContext` custom hook.

## Basic Usage

Pull values from context with our custom hook:

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

## Values

### addNotification

Function to add a temporary notification to `MessageList`, and it will be removed after 5 seconds.

| Type     |
| -------- |
| function |
|          |

### closeThread

The function to close the currently open `Thread`.

| Type     |
| -------- |
| function |

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

### jumpToFirstUnreadMessage

Jumps to the first unread message in the channel, if such message exists. If the message is not found, jumps to last read message. Does not jump if the last read message is not defined. The parameter `queryMessageLimit` specifies the message page size around the first unread message in case it is not found in the local app state and has to be retrieved through and API call.

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

### jumpToLatestMessage

Used in conjunction with `jumpToMessage`. Restores the position of the message list back to the most recent messages.

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

### jumpToMessage

When called, `jumpToMessage` causes the current message list to jump to the message with the id specified in the `messageId` parameter.
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

The function to load next page/batch of `messages` (used for pagination).

| Type     |
| -------- |
| function |

### loadMoreNewer

The function to load next page/batch of `messages` (used for pagination).

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

### loadMoreThread

The function to load next page/batch of `messages` in a currently active/open `Thread` (used for pagination).

| Type     |
| -------- |
| function |

### markRead

Throttled function that executes the API request and updates the local channel read state for own user. The behavior can be configured via the single `options` parameter of type `MarkReadWrapperOptions`. The `options` parameter has the following structure:

| Field                  | Type      | Optional | Description                                                                                                                                                                                                                                                                                                                 |
|------------------------|-----------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `updateChannelUiUnreadState` | `boolean` | yes      | Signal, whether the `channelUnreadUiState` should be updated. The local state update is prevented when the Channel component is mounted. This is in order to keep the UI indicating the original unread state, when the user opens a channel. If the value for `updateChannelUiUnreadState` is not provided, the state is updated. |
 |

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

### onMentionsClick

Custom action handler function to execute when @mention is clicked, takes a DOM click event object and an array of mentioned users.

| Type     |
| -------- |
| function |

### onMentionsHover

The function to execute when @mention is hovered in a `message`, takes a DOM click event object and an array of mentioned users.

| Type     |
| -------- |
| function |

### openThread

The function to execute when replies count button is clicked, takes the parent message of the `Thread` to be opened and optionally a DOM click event.

| Type     |
| -------- |
| function |

### removeMessage

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

| Type     |
| -------- |
| function |

### retrySendMessage

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

| Type     |
| -------- |
| function |

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

### setQuotedMessage

The function to send a `QuotedMessage` on a `Channel`, take a `message` object.

| Type     |
| -------- |
| function |

### updateMessage

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

| Type     |
| -------- |
| function |
