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:

ParameterTypeDefault valueDescription
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.
currentChannelstringn/aCurrent 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?booleantrueOption 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/aPass a callback function to get user metadata whenever it's not passed to the users option.
typingIndicatorTimeout?number10Option to define a timeout in seconds for typing indicators to hide after the last typed character.
retryOptions?RetryOptionsretryOptions: {maxRetries: 1, timeout: 0, exponentialFactor: 1}Options for automatic retries on errors.
onMessage?(message: MessageEnvelope) => unknownn/aCallback run on new messages.
onSignal?(message: SignalEvent) => unknownn/aCallback run on signals.
onMessageAction?(event: MessageActionEvent) => unknownn/aCallback run on message reactions.
onPresence?(event: PresenceEvent) => unknownn/aCallback run on presence events.
onUser?(event: BaseObjectsEvent) => unknownn/aCallback run on object events.
onChannel?(event: BaseObjectsEvent) => unknownn/aCallback run on object events.
onMembership?(event: BaseObjectsEvent) => unknownn/aCallback run on object events.
onFile?(event: FileEvent) => unknownn/aCallback run on file events.
onStatus?(event: StatusEvent) => unknownn/aCallback run on status events.
onError?(error: Error) => unknown(): void => nullCallback run on any type of errors raised by the components.
Last updated on