Channel List for PubNub Chat Components for React

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.


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

Channel thumb

Company Culture

Company culture space

Channel thumb

Daily Standup

Async virtual standup

Channel thumb

Exec AMA

Ask the CEO anything

Channel thumb

India Office

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

Channel thumb


This channel is for company wide chatter

Channel thumb

London Office

London Office 🇬🇧

Channel thumb


Everything about movies

Channel thumb

Off Topic

Non-work banter and water cooler conversation

Channel thumb

Poland Office

Zapytaj Nas O Cokolwiek 🇵🇱

Channel thumb


soc-running space


You can configure the component using these parameters:

ParameterTypeDefault valueDescription
channelsChannelEntity[] | string[]n/aOption to pass a list of channels, including metadata, to render on the list.
sort?(a: ChannelEntity, b: ChannelEntity) => -1 | 0 | 1n/aChannels are sorted alphabetically by default, you can override that by providing a sorter function.
extraActionsRenderer?(channel: ChannelEntity) => JSX.Elementn/aOption to provide an extra actions renderer to add custom action buttons to each channel.
channelRenderer?(channel: ChannelEntity) => JSX.Elementn/aOption to provide a custom channel renderer to override default themes and CSS variables.
onChannelSwitched?(channel: ChannelEntity) => unknownn/aCallback run when a user clicked one of the channels. Can be used to switch the current channel.
Last updated on