Chat Provider 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.

Chat provider is used to configure various common options and feed the components with data. It expects at least currentChannel to display within components.

Chat itself is supposed to be wrapped with a PubNubProvider component that is a part of the PubNub React SDK. You should use it to pre-configure your PubNub instance. Read the Getting Started page for details.

Component

Check the preview of how Chat Provider component is typically used.

<PubNubProvider client={pubnub}>
  <Chat currentChannel="test-channel" theme="light">
    {/* Add components here */}
  </Chat>
</PubNubProvider>

Parameters

You can configure the component using these parameters:

Parameter	Type	Default value	Description
theme?	"light", "dark", "support", "support-dark", "event", "event-dark"	"light"	General theme to be used by the components. Exact looks can be tweaked later on with the use of CSS variables.
currentChannel	string	n/a	Current channel to display the messages and members from.
channels?	string[]	[]	Array of channels to subscribe to get events. Allows up to 50 channels. Setting this option will disable the auto subscription when switching the current channel.
channelGroups?	string[]	[]	Array of channel groups to subscribe to get events. Allows up to 50 channel groups. Setting this option will disable the auto subscription when switching the current channel group.
enablePresence?	boolean	true	Option to disable presence events when set to false. OccupancyIndicator and MemberList components will only work with memberships in that case.
users?	UserEntity[]	[]	Option to provide an external list of user metadata. It's used to display information about senders on MessageList and TypingIndicator.
getUser?	(userId: string) => UserEntity or (userId: string) => Promise<UserEntity>	n/a	Pass a callback function to get user metadata whenever it's not passed to the users option.
typingIndicatorTimeout?	number	10	Option to define a timeout in seconds for typing indicators to hide after the last typed character.
retryOptions?	RetryOptions	retryOptions: {maxRetries: 1, timeout: 0, exponentialFactor: 1}	Options for automatic retries on errors.
onMessage?	(message: MessageEnvelope) => unknown	n/a	Callback run on new messages.
onSignal?	(message: SignalEvent) => unknown	n/a	Callback run on signals.
onMessageAction?	(event: MessageActionEvent) => unknown	n/a	Callback run on message actions.
onPresence?	(event: PresenceEvent) => unknown	n/a	Callback run on presence events.
onUser?	(event: BaseObjectsEvent) => unknown	n/a	Callback run on object events.
onChannel?	(event: BaseObjectsEvent) => unknown	n/a	Callback run on object events.
onMembership?	(event: BaseObjectsEvent) => unknown	n/a	Callback run on object events.
onFile?	(event: FileEvent) => unknown	n/a	Callback run on file events.
onStatus?	(event: StatusEvent) => unknown	n/a	Callback run on status events.
onError?	(error: Error) => unknown	(): void => null	Callback run on any type of errors raised by the components.