Getting Started: Reusing React Chat Components Series

3 min readChandler Mayo on Feb 24, 2022
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

In this tutorial, we will walk you through how PubNub React Chat Components are used in an existing sample app.

In this tutorial series, we will walk you through how to take PubNub’s React Chat Components and integrate them into any other React app. This is the first video in a three part series on Reusing React Chat Components. 

We’ll start this series by taking a look at how PubNub React Chat Components are used in an existing sample app. In part two of these tutorials, we will demonstrate how to import React Chat Components into any React application or React project. Then, in the final tutorial, we’ll show you how to configure and customize the components. If you’re not yet familiar with PubNub’s React Chat Components, check out our product release announcement here.

Let’s dive into the tutorial—watch part one below to see a demo of PubNub’s React Chat Components and learn about how your app can benefit from them, then keep reading to see how you can get your API keys so you can start building with these components.  

PubNub’s React Chat Components Overview 

PubNub’s React Chat Components empower developers—like you—to create rich chat experiences without the opportunity cost of building chat when you could be focused on creating other parts of your application. Whether you are making a chat app from scratch, migrating your chat widget, or adding features to your existing Android application—our ready-to-use React message components provide you with the building blocks to easily add the features your users expect from a chat experience, all without needing to create and maintain the infrastructure yourself. 

By relying on PubNub’s components, you can build features like: 

User and Channel Metadata: Fetch metadata about users, channels, and memberships from objects storage using custom hooks.

Channel Subscriptions: Automatic subscriptions to current channel and optional subscriptions to other channels and channel groups.

Messages: Publish and listen to text messages and fetch history for each channel.

User Presence: Fetch currently present users and listen to new presence events like a user subscribing or leaving.

Typing Indicators: Typing indicators displayed as text notifications or messages.

Chat Message Reactions: Publish and display message reactions (emojis) for messages.

Why build the infrastructure yourself when PubNub has already done it for you? We provide all the lower level services and backend support you need for chat, so you can focus on innovating your app and building chat experiences that will engage and retain your users. 

Now, let’s dive into how PubNub’s React Components work.

How do PubNub’s React Chat Components work?

PubNub is used for real-time message delivery, metadata, user presence, and other chat related data to facilitate the actions within the chat UI Components. React Chat Components have PubNub services fully incorporated and are ready to use, including built-in light and dark themes with CSS variables that are customizable for any use case. 

These are the React application components that are currently available: 

Chat: Required state provider.

Message List: Shows list of channel messages.

Message Input: Input for sending new messages.

Channel List: List of channels you can access and send messages to.

Channel Members: List of users in a channel and updates with new users.

Typing Indicator: Indication of typing activity before messages are sent to a channel. 

However, this React chat app tutorial series will specifically cover these components: 

  • Chat

  • Message List

  • Message Input 

  • Typing Indicator

Chat API Setup for React Components

To follow along with our Reusing React Chat Components tutorial series, you will need a PubNub account, where you will use your PubNub API keys to build a chat application with React Chat Components. As a reminder, a PubNub account and API keys are always free.

Here’s how to get started: 

  1. Sign up for a PubNub account.

  2. Sign in to your PubNub Dashboard.

  3. Follow the steps in the video tutorial to configure a chat application with PubNub React Chat Components.

What’s Next 

In the above video tutorial, we took a look at how PubNub’s React Chat Components are used in an existing ReactJS sample app and how to get started setting up a PubNub Account. 

Be sure to check out part two of our Reusing React Chat Components Tutorial Series, where we’ll cover how to integrate PubNub’s React Chat Components in any React app.

In the meantime, you can explore these additional React Chat Components resources:

Need some extra help or want to learn more about React Chat Components? Get in touch with our sales team to discuss how you can easily build and scale your chat with PubNub.

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff