이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
문서 개요/
Chat/
UIKit/
Web/
UI 컴포넌트/
대화 목록/
대화 목록 컨텍스트/

대화 목록 컨텍스트

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();