User and channel metadata for PubNub Chat Components for React

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

Some components require providing lists of channels and users that should be displayed. Some of those work fine with simple lists of strings, although look much better when provided with metadata about the entities. See the reference below to understand what's expected where and why:

Component	Description	Property	Data type
ChannelList	Displays channel names with descriptions.	channels	string[] or ChannelEntity[]
MemberList	Displays full user names, avatars and an additional line of text that can serve as a user's description/title/status.	members	string[] or UserEntity[]
MessageList	Displays full user names and avatars.	users of the Chat Provider	UserEntity[]
TypingIndicator	Displays full user names or avatars, depending on the type of the indicator.	users of the Chat Provider	UserEntity[]

Data source

PubNub infrastructure allows you to store information about channels, users, and memberships between the two, using App Context feature. Even though all of the metadata has to be explicitly provided, you can feed the data to the components from any source. Hence, it's possible to create chat applications with completely serverless architecture. For more information, refer to the JavaScript SDK.

Once metadata is created and stored on PubNub servers, it's possible to easily fetch it and pass it to the components using our custom React hooks.

Channel data type

interface ChannelEntity {
  id: string; // used as an unique channel identifier across the components
  name: string; // displayed on the ChannelList (first line)
  description?: string; // displayed on the ChannelList (second line)
  custom?: {
    // not used in Chat Components by default, but can store additional data
    profileUrl?: string | null, // expects an image URL to display the channel thumbnail
    [key: string]: unknown,
  };
}

User data type

interface UserEntity {
  id: string;                  // used as an unique user identifier across the components
  name: string;                // displayed on Messages, Typing Indicator, and Member List
  profileUrl?: string | null;  // expects an image URL to display the user avatar
  externalId?: string | null;  // not used in Chat Components
  email?: string | null;       // not used in Chat Components
  eTag: string;                // not used in Chat Components
  created: string;             // not used in Chat Components
  updated: string;             // not used in Chat Components
  custom?: {
    title?: string             // displays user title / description / status on the member list
    [key: string]: unknown;    // can store additional data
  };
}

User metadata examples

PubNub Chat Components for React require you to explicitly pass information about the users of your app to correctly display their names and avatars. Otherwise, messages will show sender IDs and avatar placeholders. You can provide metadata from numerous different sources, including your own database or App Context storage. You can also attach information about the sender directly to each message.

User ID / UUID

User ID is also referred to as UUID/uuid in some APIs and server responses but holds the value of the userId parameter you set during initialization.

Pass in metadata of all users

This example assumes user information was previously stored in App Context. In that case, you can easily fetch it using the useUsers custom hook and pass all of it directly to the components using the users option in the Chat provider:

import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import { Chat, MessageList, MessageInput, useUsers } from "@pubnub/react-chat-components";

const pubnub = new PubNub({
  publishKey: "demo",
  subscribeKey: "demo",
  userId: "test-user",
});

export default function PubNubChat() {
  return (
    <PubNubProvider client={pubnub}>
      <ChatConversation />
    </PubNubProvider>

show all 28 lines

Attach sender data to messages

Alternatively, you can just provide the information on your current user and attach its ID directly to each message using the senderInfo option in the MessageInput. In this case, you can still use PubNub to store this information, but that's how it would work with dynamically created data:

import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import { Chat, MessageList, MessageInput } from "@pubnub/react-chat-components";

const myUser = {
  id: "test-user",
  name: "Mark Kelley",
  profileUrl: "https://randomuser.me/api/portraits/men/1.jpg",
};

const pubnub = new PubNub({
  publishKey: "demo",
  subscribeKey: "demo",
  userId: myUser.id,
});

show all 26 lines