tencent cloud

React
Download PDF
Last updated: 2025-07-22 14:48:19
React
Last updated: 2025-07-22 14:48:19
Download PDF

Overview

The React MessageList component supports read receipt capability, determining whether a single message has been read by the recipient in one-on-one chats. In group chats, it independently determines whether an individual message has been read by a group member.

Effect Display



Usage

The React UIKit provides the MessageList component. Setting the enableReadReceipt property to true in the MessageList component enables read receipt (if left empty, the default value is false).
import {
  Chat,
  ChatHeader,
  ConversationList,
  MessageInput,
  MessageList,
} from '@tencentcloud/chat-uikit-react';

function App() {
  return (
    <UIKitProvider>
      <div style={{ display: 'flex', height: '100vh' }}>
        <ConversationList style={{ minWidth: '30%' }} />
        <Chat>
          <ChatHeader />
          // Enable read receipt
          <MessageList enableReadReceipt={true} />
          <MessageInput />
        </Chat>
      </div>
    </UIKitProvider>
  );
}

export default App;




Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback