useUnreads

The useUnreads hook allows you to get a list of conversations with unread messages. It needs to be a used in a descendant of the <Session> component.

The hook returns an array of UnreadConversation objects, or undefined if the hook is used outside of a <Session> object, or if the session gets destroyed. (In particular, this often happens in development due to things like hot module reloading).

This example component uses the useUnreads hook to render a <span> containing the number of conversations with unread messages.

1import { useUnreads } from '@talkjs/react';
2
3function UnreadConversationsCounter(props) {
4  const unreads = useUnreads(); // Talk.UnreadConversation[] | undefined  
5  
6  if(!unreads) {
7    return null;
8  }
9
10  return <span className="unreads-count">{unreads.length}</span>
11}