This is beta documentation for Stream Chat React SDK v14. For the latest stable version, see the latest version (v13) .

ChannelActionContext

ChannelActionContext is provided by 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:

const { closeThread, loadMoreThread } = useChannelActionContext();

Values

Value	Description	Type
`addNotification`	Adds a temporary notification to `MessageList`, removed after about five seconds.	`(text: string, type: 'success' \| 'error') => void`
`closeThread`	Closes the currently open `Thread`.	`(event?: React.BaseSyntheticEvent) => void`
`deleteMessage`	Triggers the delete-message request.	`(message: LocalMessage, options?: DeleteMessageOptions) => Promise<void>`
`dispatch`	Dispatch function for the `ChannelStateReducer`.	`ChannelStateReducerAction`
`editMessage`	Starts editing a message and returns a promise.	`(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.	`(queryMessageLimit?: number) => Promise<void>`
`jumpToLatestMessage`	Restores the list to the most recent messages after `jumpToMessage`.	`() => Promise<void>`
`jumpToMessage`	Scrolls to the message with the given `messageId`.	`(messageId: string) => Promise<void>`
`loadMore`	Loads the next page of messages.	`(limit?: number) => Promise<number>`
`loadMoreNewer`	Loads newer messages.	`(limit?: number) => Promise<number>`
`loadMoreThread`	Loads the next page of thread messages.	`(limit?: number) => Promise<number>`
`markRead`	Throttled function that marks the channel read and updates local state. Accepts optional `MarkReadWrapperOptions`; `updateChannelUiUnreadState` defaults to `true`.	`(options?: MarkReadWrapperOptions) => void`
`onMentionsClick`	Runs when an `@mention` is clicked and receives the DOM event plus the mentioned users.	`(event: React.BaseSyntheticEvent, user: UserResponse[]) => void`
`onMentionsHover`	Runs when an `@mention` is hovered and receives the DOM event plus the mentioned users.	`(event: React.BaseSyntheticEvent, user: UserResponse[]) => void`
`openThread`	Opens a thread for the parent message, optionally with the click event.	`(message: LocalMessage, event?: React.BaseSyntheticEvent) => void`
`removeMessage`	Removes a message from `MessageList`.	`(message: LocalMessage) => void`
`retrySendMessage`	Resends a message.	`(message: LocalMessage) => Promise<void>`
`sendMessage`	Sends a message on `Channel`. Takes the message payload as the first argument and custom data as the second argument.	`(message: MessageToSend, customMessageData?: Partial<Message>) => Promise<SendMessageAPIResponse>`
`updateMessage`	Updates a message on `Channel`.	`(message: LocalMessage) => void`

Examples

Jump to a searched message

const JumpToMessage = () => {
  const { jumpToMessage } = useChannelActionContext();
  return (
    <button
      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>
  );
};

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

ChannelHeader

ChannelStateContext