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:

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:

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

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

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

show all 16 lines