Docs Overview/
Chat/
UIKit/
Web/
UI Components/
Conversation List/
ConversationListContext/

ConversationListContext

ConversationListProvider

ConversationListProvider acts as the wrapper for the entire ConversationList, providing context to all components within the ConversationList.
ConversationListProvider internally listens to and processes data related to Conversation in the ChatEngine, then passes it to the entire ConversationList UI.

Props

ConversationListProvider accepts two optional parameters: filter and sort, to handle the conversationList data to be displayed
Parameter Name
Type
Default Value
Indication
filter
(conversationList: IConversationModel[]) => IConversationModel[]
-
Function for Filtering Conversation List.
sort
(conversationList: IConversationModel[]) => IConversationModel[]
-
Function for Sorting Conversation List.

Basic Usage

import { ConversationListProvider, IConversationListProps } from '@tencentcloud/chat-uikit-react';

function CustomConversationList(props: IConversationListProps) {
  <ConversationListProvider filter={props.filter} sort={props.sort}>
    <div>Custom ConversationList UI</div>
  </ConversationListProvider>;
}

useConversationList

useConversationList is implemented based on the React useContext Hook.
All components within the ConversationListProvider can read and subscribe to values in the useConversationList context.

Value

useConversationList provides the following context values:
Parameter Name
Type
Indication
conversationList
The original conversation list obtained from ChatEngine.
filteredAndSortedConversationList
The conversation list to be rendered by ConversationList.
This is the conversation list filtered and sorted by ConversationListProvider.
currentConversation
The currently open conversation.
setCurrentConversation
(conversation: IConversationModel) => void;
Set the currently open conversation.
isLoading
Boolean
Determine whether the current conversation list is loading.
isLoadError
Boolean
Determine whether there been an error fetching the current conversation list.

Basic Usage

import { useConversationList } from '@tencentcloud/chat-uikit-react';

const { 
    conversationList, 
    filteredAndSortedConversationList, 
    currentConversation, 
    setCurrentConversation 
} = useConversationList();