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 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 API 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 App Context 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.
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 API Components work?
How can you leverage chat API components? PubNub is used for real-time message delivery, metadata, 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:
Sign up for a PubNub account.
Sign in to your PubNub Dashboard.
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.
