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

List of Components

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

Usage

PubNub Account

Sign in or create an account to create an app on the Admin Portal and get the keys to use in your application.
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.
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.

Clone the repository:

git clone git@github.com:pubnub/react-chat-components.git

Go to the samples folder and install the dependencies:

cd react-chat-components/samples
npm install

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

vi pubnub-keys.json

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

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

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

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

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

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

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.

jpjpjp/react-chat-components