---
source_url: https://www.pubnub.com/docs/chat/components/react/ui-components/channel-list
title: Channel List for PubNub Chat Components for React
updated_at: 2026-05-25T11:25:16.882Z
---

> 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


# Channel List 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).
:::

Renders an interactive list of channels.

It can represent all channels of the application, only channels joined by the current user, all channels available to be joined, or whatever else is passed into it. A common pattern in chat applications is to render two instances of the component - one visible all the time to show joined channels, and another one hidden inside a modal with channels available to join. Make sure to handle the onChannelSwitched event to switch the current channel passed to the Chat provider.

## Component

This section shows the preview of a sample Channel List component and its source code.

### Preview

Company Culture

Company culture space

Daily Standup

Async virtual standup

Exec AMA

Ask the CEO anything

India Office

भारत के कार्यालय में आपका स्वागत है🇮🇳!

Introductions

This channel is for company wide chatter

London Office

London Office 🇬🇧

Movies

Everything about movies

Off Topic

Non-work banter and water cooler conversation

Poland Office

Zapytaj Nas O Cokolwiek 🇵🇱

Running

soc-running space

### Source Code

```tsx
<Chat currentChannel="space.2ada61db17878cd388f95da34f9">
<ChannelList
  channels={[
    {
        "name": "Movies",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/149e60f311749f2a7c6515f7b34?s=256&d=identicon"
        },
        "description": "Everything about movies",
        "eTag": "AbOx6N+6vu3zoAE",
        "id": "space.149e60f311749f2a7c6515f7b34",
        "updated": "2020-09-23T09:23:37.175764Z"
    },
    {
        "name": "Daily Standup",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/2ada61db17878cd388f95da34f9?s=256&d=identicon"
        },
        "description": "Async virtual standup",
        "eTag": "Ab+2+deSmdf/Fw",
        "id": "space.2ada61db17878cd388f95da34f9",
        "updated": "2020-09-23T09:23:36.960491Z"
    },
    {
        "name": "Running",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/363d9255193e45f190539e0c7d5?s=256&d=identicon"
        },
        "description": "soc-running space",
        "eTag": "AcrWgrqgmcyHswE",
        "id": "space.363d9255193e45f190539e0c7d5",
        "updated": "2020-09-23T09:23:37.183458Z"
    },
    {
        "name": "India Office",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/515fc9a2a1a895f4059c84b2971?s=256&d=identicon"
        },
        "description": "भारत के कार्यालय में आपका स्वागत है🇮🇳!",
        "eTag": "AZSu2tPUuLeO2QE",
        "id": "space.515fc9a2a1a895f4059c84b2971",
        "updated": "2020-09-23T09:23:36.935077Z"
    },
    {
        "name": "Off Topic",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/a204f87d215a40985d35cf84bf5?s=256&d=identicon"
        },
        "description": "Non-work banter and water cooler conversation",
        "eTag": "AZ2/xY3Qv9GGUQ",
        "id": "space.a204f87d215a40985d35cf84bf5",
        "updated": "2020-09-23T09:23:36.945993Z"
    },
    {
        "name": "London Office",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/a652eb6cc340334ff0b244c4a39?s=256&d=identicon"
        },
        "description": "London Office 🇬🇧",
        "eTag": "AfD93cn945yNTA",
        "id": "space.a652eb6cc340334ff0b244c4a39",
        "updated": "2020-09-23T09:23:36.951506Z"
    },
    {
        "name": "Introductions",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/ac4e67b98b34b44c4a39466e93e?s=256&d=identicon"
        },
        "description": "This channel is for company wide chatter",
        "eTag": "AfeD+Zn+idGFTQ",
        "id": "space.ac4e67b98b34b44c4a39466e93e",
        "updated": "2021-02-19T18:01:51.886025Z"
    },
    {
        "name": "Poland Office",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/c1ee1eda28554d0a34f9b9df5cfe?s=256&d=identicon"
        },
        "description": "Zapytaj Nas O Cokolwiek 🇵🇱",
        "eTag": "Adzu4uSC45jGsgE",
        "id": "space.c1ee1eda28554d0a34f9b9df5cfe",
        "updated": "2020-09-23T09:23:36.939098Z"
    },
    {
        "name": "Company Culture",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/ce466f2e445c38976168ba78e46?s=256&d=identicon"
        },
        "description": "Company culture space",
        "eTag": "AYTS0uL/zs/nXA",
        "id": "space.ce466f2e445c38976168ba78e46",
        "updated": "2020-09-23T09:23:37.170896Z"
    },
    {
        "name": "Exec AMA",
        "custom": {
            "profileUrl": "https://www.gravatar.com/avatar/e1eda2fd92e551358e4af1b6174?s=256&d=identicon"
        },
        "description": "Ask the CEO anything",
        "eTag": "Ade5g4XZzN652AE",
        "id": "space.e1eda2fd92e551358e4af1b6174",
        "updated": "2020-09-23T09:23:37.18019Z"
    }
]}
/>
</Chat>
```

## Parameters

You can configure the component using these parameters:

| Parameter | Default value | Description |
| --- | --- | --- |
| channels | ChannelEntity[] | Optional |  | n/a | Option to pass a list of channels, including metadata, to render on the list. |
| sort? | (a: | Optional |  | n/a | Channels are sorted alphabetically by default, you can override that by providing a sorter function. |
| extraActionsRenderer? | (channel: | Optional |  | n/a | Option to provide an extra actions renderer to add custom action buttons to each channel. |
| channelRenderer? | (channel: | Optional |  | n/a | Option to provide a custom channel renderer to override default themes and CSS variables. |
| onChannelSwitched? | (channel: | Optional |  | n/a | Callback run when a user clicked one of the channels. Can be used to switch the current channel. |