User and channel metadata for PubNub Chat Components for React

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:

ComponentDescriptionPropertyData type
ChannelListDisplays channel names with descriptions.channelsstring[] or ChannelEntity[]
MemberListDisplays full user names, avatars and an additional line of text that can serve as a user's description/title/status.membersstring[] or UserEntity[]
MessageListDisplays full user names and avatars.users of the Chat ProviderUserEntity[]
TypingIndicatorDisplays full user names or avatars, depending on the type of the indicator.users of the Chat ProviderUserEntity[]

Data source

PubNub infrastructure allows you to store information about channels, users, and memberships between the two, using Objects 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 following:

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 PubNub Objects storage. You can also attach information about the sender directly to each message.

Pass in metadata of all users

This example assumes user information was previously stored in PubNub Objects. 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",
uuid: "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",
uuid: myUser.id,
});
show all 26 lines