Integrating Components: 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.

During this tutorial, we will demonstrate step-by-step how to integrate components into any React chat app.

In part one of our tutorial series, we covered how PubNub’s React Chat Components are used in an existing sample app. During this tutorial, we will demonstrate step-by-step how to integrate those components into any React chat app. If you’re not yet familiar with PubNub Chat Components, check out our product release announcement here.

Before we get started, let's review how your chat app can benefit from PubNub’s components. 

Build engaging chat experiences

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. By relying on PubNub’s infrastructure, you can easily and quickly build custom chat experiences without ever worrying about scalability. 

Our set of ready-to-use React Chat Components are packed with the chat features and functionality your users expect:

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

Channel Subscriptions: Create automatic subscriptions to current channels 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: Display typing indicators as text notifications or messages.

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

Now, let’s take a look at the video tutorial where you will learn how you can easily integrate customizable components into any React App.

How to install and use components in your application

To follow along with part two of our tutorial, you’ll first want to ensure that you have completed the previous steps from part one of this series. 

This includes: 

  1. Signing in or creating a PubNub account. 

  2. Using your PubNub API keys to then start building with these components.

Now that you have your API keys, you can follow the steps in the video tutorial to configure a chat application with PubNub React Chat Components. In this tutorial, you’ll learn the fastest way to add chat features without going through the complexity of low-level architecture of real-time networks.

SDK and PubNub Chat Components for React

In the above video tutorial, we demonstrated how to install the PubNub SDK and Chat Components for React and how to integrate them into the sample chat app—which will be done using Visual Studio Code. 

Each step, along with the code needed, is detailed in the above video, but here is a brief overview of the steps included: 

  1. Install the components and all required dependencies using npm. 

  2. Next, import PubNub React Chat Components into your application. 

  3. Create your PubNub client and rest of the configuration for the chat provider. 

Once you have completed those steps, you’ll feed the PubNub Provider with your newly created client as well as other PubNub React applications. You can easily tweak UI components at any time using option properties and CSS variables.

  1. Place the components within the chat state provider in any order that your app requires. For example, adding a Message List, Message Input, or typing indicators. 

  2. After the components have been implemented and you have saved that file, you will then go back to the terminal and restart the application. 

  3. The components you have added will now be displayed in your chat application. 

What’s Next

PubNub’s ready-made components enable you to add rich chat features like typing indicators, read receipts, reactions, and more without writing complex code. In part one and two of this tutorial series, we explored how PubNub React Chat Components are used in an existing sample app and how you can integrate them in any React app—while ultimately reducing your build time.

Check out the final part of our tutorial series, where we will show you how to configure and customize components to look and feel exactly how you want them to. 

If you’re looking for some additional example applications built using PubNub and React Chat Components, see these GitHub samples: 

Need some extra help with integrating components? Get in touch with our sales team to discuss how you can easily build an engaging chat app 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