---
source_url: https://www.pubnub.com/docs/sdks/react/api-reference/provider
title: PubNub Provider
updated_at: 2024-06-13T07:29:12.000Z
---

# PubNub Provider

> For AI agents: documentation index at https://www.pubnub.com/llms-full.txt

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>
      );
    }
```

Last updated at: 2024-06-13T07:29:12.000Z