---
source_url: https://www.pubnub.com/docs/chat/components/react/metadata
title: User and channel metadata for PubNub Chat Components for React
updated_at: 2026-06-18T11:25:21.208Z
---
> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt
# User and channel metadata for PubNub Chat Components for React
:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::
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](#user-metadata-examples) | `UserEntity[]` |
| `TypingIndicator` | Displays full user names or avatars, depending on the type of the indicator. | [users of the Chat Provider](#user-metadata-examples) | `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](https://www.pubnub.com/docs/sdks/javascript/api-reference/objects).
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](https://www.pubnub.com/docs/chat/components/react/custom-hooks/overview).
### Channel data type
```jsx
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
```jsx
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.
:::note 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](https://www.pubnub.com/docs/general/setup/users-and-devices#set-the-user-id).
:::
### Pass in metadata of all users
This example assumes user information was previously stored in [App Context](https://www.pubnub.com/docs/general/metadata/users-metadata). In that case, you can easily fetch it using the [useUsers](https://www.pubnub.com/docs/chat/components/react/custom-hooks/use-users) custom hook and pass all of it directly to the components using the `users` option in the `Chat` provider:
```jsx
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 (
);
}
export function ChatConversation() {
const [users] = useUsers();
return (
);
}
```
### 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:
```jsx
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,
});
export default function PubNubChat() {
return (
);
}
```