---
source_url: https://www.pubnub.com/docs/chat/components/react/chat-provider
title: Chat Provider for PubNub Chat Components for React
updated_at: 2026-06-19T11:34:48.228Z
---

> 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


# Chat Provider 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).
:::

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](https://www.pubnub.com/docs/chat/components/react) page for details.

## Component

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

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

## Parameters

You can configure the component using these parameters:

| Parameter | Default value | Description |
| --- | --- | --- |
| theme? | "light", | Optional |  | `"light"` | General theme to be used by the components. Exact looks can be tweaked later on with the use of [CSS variables](https://www.pubnub.com/docs/chat/components/react/ui-theming/css-variables). |
| currentChannel | string | Optional |  | n/a | Current channel to display the messages and members from. |
| channels? | string[] | Optional |  | `[]` | 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[] | Optional |  | `[]` | 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 | Optional |  | `true` | Option to disable presence events when set to `false`. OccupancyIndicator and MemberList components will only work with memberships in that case. |
| users? | UserEntity[] | Optional |  | `[]` | Option to provide an external list of user metadata. It's used to display information about senders on MessageList and TypingIndicator. |
| getUser? | (userId: | Optional |  | n/a | Pass a callback function to get user metadata whenever it's not passed to the `users` option. |
| typingIndicatorTimeout? | number | Optional |  | `10` | Option to define a timeout in seconds for typing indicators to hide after the last typed character. |
| retryOptions? | RetryOptions | Optional |  | `retryOptions: {maxRetries: 1, timeout: 0, exponentialFactor: 1}` | Options for automatic retries on errors. |
| onMessage? | (message: | Optional |  | n/a | Callback run on new messages. |
| onSignal? | (message: | Optional |  | n/a | Callback run on signals. |
| onMessageAction? | (event: | Optional |  | n/a | Callback run on message reactions. |
| onPresence? | (event: | Optional |  | n/a | Callback run on presence events. |
| onUser? | (event: | Optional |  | n/a | Callback run on object events. |
| onChannel? | (event: | Optional |  | n/a | Callback run on object events. |
| onMembership? | (event: | Optional |  | n/a | Callback run on object events. |
| onFile? | (event: | Optional |  | n/a | Callback run on file events. |
| onStatus? | (event: | Optional |  | n/a | Callback run on status events. |
| onError? | (error: | Optional |  | `(): void => null` | Callback run on any type of errors raised by the components. |