---
source_url: https://www.pubnub.com/docs/sdks/react/api-reference/provider
title: PubNub Provider
updated_at: 2026-06-18T11:28:32.254Z
---

> 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


# PubNub Provider

The `PubNubProvider` makes a PubNub client instance available to a React component tree.

## Required arguments

The PubNubProvider component takes a single `client` argument, which is the required `pubnub` instance. This is used by all components that require PubNub functionality.

## Example

Instantiate a `PubNubProvider` as follows:

```jsx
import PubNub from 'pubnub';
import { PubNubProvider } from 'pubnub-react';

const pubNubConfig = require('./pubnub.config.json');
const pubnub = new PubNub(pubNubConfig.keySet);

const App = () => {
  return (
    <PubNubProvider client={pubnub}>
      <MyRootComponent />
    </PubNubProvider>
  );
};

export default App;
```

This example assumes that your publish and subscribe keys are contained in a file called `pubnub.config.json`, similar to the following:

```json
{
  "keySet":
  {
    "publishKey": "myPublishKey",
    "subscribeKey": "mySubscribeKey"
  }
}
```

You can also configure the PubNub client directly within the code:

```jsx
import PubNub from 'pubnub';
import { PubNubProvider } from 'pubnub-react';

const pubnub = new PubNub({
      publishKey: 'myPublishKey',
      subscribeKey: 'mySubscribeKey',
      uuid: 'myUniqueUUID'
    });

    function App() {
      return (
        <PubNubProvider client={pubnub}>
          <MyRootComponent />
        </PubNubProvider>
      );
    }
```