Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Read receipt

Copy link

Read receipt is a feature that allows a user to know whether their messages have been read by other users in the channel. The UI for read receipt appears in the MessageList component of the Channel module and in the ChannelPreview component of the ChannelList module. If the sender's message has been read by all recipients in the channel, a colored double-tick icon will appear above the message’s timestamp. Read receipt is only visible to the sender of the message.


How to use

Copy link

While the read receipt feature is turned on by default in the Channel module, you have to set the feature's setter method to true in the ChannelList module. Implement the code below to turn on the read receipt in a channel list view.

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import ChannelList from '@sendbird/uikit-react/ChannelList';
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';

// Using SendbirdProvider
const CustomApp = () => {
  return (
    <SendbirdProvider
      // ...
      isMessageReceiptStatusEnabledOnChannelList
    >
      {/* implement custom app with useSendbirdStateContext() */}
    </SendbirdProvider>
  );
};

// Using ChannelList
const UseChannelList = () => {
  return (
    <ChannelList
      // ...
      isMessageReceiptStatusEnabled
    />
  );
};

// Using ChannelListProvider
const CustomChannelList = () => {
  return (
    <ChannelListProvider
      // ...
      isMessageReceiptStatusEnabled
    >
      {/* implement channel list with useChannelListContext() */}
    </ChannelListProvider>
  );
};

Customize the UI for read receipt

Copy link

You can customize the UI for read receipt by using the following code.

import Channel from '@sendbird/uikit-react/Channel';
import { useChannelContext } from '@sendbird/uikit-react/Channel/context';
import { SendingStatus } from '@sendbird/chat/message';

const CustomMessage = (props) => {
  const { message } = props;
  const { currentGroupChannel } = useChannelContext();
  if (message.sendingStatus === SendingStatus.SUCCEEDED
  && currentGroupChannel?.getUnreadMemberCount?.(message) === 0) {
    return (
      // Implement if the message was read by all channel members.
    );
  }
  return null;
};

const UseChannel  = () => {
  return (
    <Channel
      // ...
      renderMessage={({ message, chainTop, chainBottom }) => (
        <CustomMessage message={message} />
      )}
    />
  );
};

Note : The same double-tick icon is used for both read receipt and delivery receipt. The only difference is the color of the icon. Default icon colors used for read receipt are secondary_300 for Light theme, and secondary_200 for Dark theme.