How to display total unread message count in react?

Please state the version of UIKit & OS you are using when creating a topic
and select the related tags

UIKit ver 2.7.0

I want to display total unread message count using SendBird.getTotalUnreadMessageCount (like android)

Hi @aram,

Depending on where you’re looking to display this value, you may need to utilize the core Javascript SDK in conjunction with the UIKit to achieve your goal. Could you provide us with some context of where you’re looking to display this value?

Please check the bottom of the screenshot.
*Mobile web

Based on the screenshot, it sounds like you would likely need to utilize the core SDK unless you’re utilizing the Sendbird Provider HOC.

If you’re using the HOC, you could get an instance of the SDK directly from the UIKit:

const context = useSendbirdStateContext();
const sdkInstance = sendBirdSelectors.getSdk(context);
const unreadCount = sdkInstance.getTotalUnreadMessageCount();

Here is an example where I console it out: totalUnreadCount Example - CodeSandbox

1 Like

Type error occurred…

Is this being called in a component that is wrapped with the SendBirdProvider HOC?

No, but I want to implement this outside the SendBirdProvider.

Ah okay. If you want to implement outside of the provider, you’ll need to utilize the Core SDK along side the UIKit. Which does mean you’d need to implement several steps such as the connection and authentication as well as the fetching of the totalUnreadCount.