Build a Chat App with React: Reusing Chat Components Series
Please note that PubNub will discontinue support for Chat Components on January 1, 2025. They will remain open-source and community-maintained but will no longer receive feature updates from PubNub.
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 a chat app with React to foster 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.
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 to build a chat app with React
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:
Signing in or creating a PubNub account.
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:
Install the components and all required dependencies using npm.
Next, import PubNub React Chat Components into your application.
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.
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.
After the components have been implemented and you have saved that file, you will then go back to the terminal and restart the application.
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, message 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.
