React Chat Components (Beta)

PubNub's Chat Components library provides easy-to-use components to build chat applications using PubNub Chat on the React Framework. Our component library is the fastest way to add chat features like direct and group messaging, typing indicators, reactions and more without going through the complexity of low-level architecture of realtime networks. At the same time it allows you to create apps for various use cases, with different functionalities and customizable looks.

Quick Links

• Sample Apps - sample applications built using Chat Components for React
• React Component Docs - describes the components' features, options, customizations etc.
• PubNub Chat Docs - look into this first to have a general understanding of how PubNub works
• PubNub React SDK - React wrapper can be used for other types of applications as well

Features

• User and Channel Metadata: fetching metadata about users, channels and memberships from PB Objects storage using custom hooks
• Subscriptions: automatic subscriptions to current channel, optional subscriptions to other channels and channel groups
• Messages: publishing and listening to text messages, fetching history for each channel
• Presence: fetching currently present users and listening to new presence, publishing presence events
• Typing Indicators: typing indicators displayed as text notifications or messages
• Message Reactions: publishing and displaying message reactions (emojis) for each message

Benefits

• Ease of installation and setup
• Allows to build fully-featured chat applications
• No need to deal with server code
• Useful compontent options to tweak the functionalities
• Built-in light and dark themes for various use cases: group, support and event chats
• Extra customization with CSS variables
• TypeScript support

Requirements

• React 16.8+ and ReactDOM 16.8+
• PubNub JavaScript SDK 4.29+
• PubNub React SDK 2.1.0+

List of Components

• Chat (obligatory state provider)
• Message List
• Message Input
• Channel List
• Channel Members
• Typing Indicator

Usage

PubNub Account

1. Sign in or create an account to create an app on the Admin Portal and get the keys to use in your application.

2. When you create a new app, the first set of keys is generated automatically, but a single app can have as many keysets as you like. We recommend that you create separate keysets for production and test environments.

3. Some of the functionalities you might want to enable on your keyset depending on the use-case include Presence, Storage & Playback (including correct Renention) and Objects (be sure to select a geographical region corresponding to most users of your application).

Run Sample Apps

Start with exploring our Sample Apps that are built using chat components. Follow the steps below to run the apps locally in your own environment.

1. Clone the repository:

git clone [email protected]:pubnub/react-chat-components.git

2. Go to the samples folder and install the dependencies:

cd react-chat-components/samples
npm install

3. Follow steps from the PubNub Account section to create your own keys and paste them into pubnub-keys.json:

vi pubnub-keys.json

4. Run the application:

npm start

Components Installation

Install the components and all required dependencies using npm:

npm install --save pubnub pubnub-react @pubnub/react-chat-components

Components Usage

1. Import PubNub, PubNub React Provider and the components:

import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import {
  Chat,
  MessageList,
  MessageInput,
  ChannelList,
  MemberList,
} from "@pubnub/react-chat-components";

2. Create your PubNub client and rest of the configuration for the Chat, which serves as a common context for all of the components:

const pubnub = new PubNub({
  publishKey: "myPublishKey",
  subscribeKey: "mySubscribeKey",
  uuid: "myUniqueUUID",
});
const currentChannel = "myCurrentChannel";
const theme = "light";

3. Feed the PubNub Provider with your newly created client as with other PubNub React applications:

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

4. Place the components within the Chat state provider in any order that your app requires. Components can be tweaked later on using option properties and CSS variables:

const MyComponent = () => {
  return (
    <PubNubProvider client={pubnub}>
      <Chat {...{ currentChannel, theme }}>
        <MessageList />
        <MessageInput />
      </Chat>
    </PubNubProvider>
  );
};

5. Check out the PubNub Chat Components Documentation to learn more about how to use the components and the PubNub Chat Components Samples to see what is possible using the components. Source code of the sample applications can be found in the samples folder in the repository root.