React Chat Components Tutorial: Build Chat Experiences
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.
We've used our existing React SDK to create ready-to use-components that make it easy to add essential features to your app—like chat—while reducing your time to market and allowing you to focus on building what you actually care about. Sign up to access our React Chat Components release using the form below. Then, read on to learn the best practices for implementing and using these new components in your app.
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 other parts of your application. You wouldn’t reinvent the wheel, so don’t reinvent chat UI components and build the infrastructure yourself when PubNub has already done it for you. There’s no need to spend the time building something that already exists when you can use PubNub’s ready-to-use React Chat Components to easily add chat features to your application.
Our set of React Chat Components are packed with the features you’d expect from most chat experiences:
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.
Our React Chat Components are flexible to your needs so you’re enabled to create chat for various use cases all with different functionalities and customizable looks. Customizations include:
Component options to tweak the functionality of each component.
Built-in light and dark themes.
Extra customization with CSS variables.
Build a telemedicine chat app, multiplayer chat lobby, live support chat center, live event chat lobby, or another style of chat with minimal effort. Build a powerful and modular chat app using these components as a starting point. Best of all: There’s no need to deal with server code at all. All of the infrastructure is provided and powered by PubNub.
In this tutorial you’ll discover how to set up and use PubNub React Chat components to build a chat application. All the steps you need to use the components are included in this post.
How does PubNub work with React Chat Components?
Before using PubNub React Chat Components, you should know why PubNub is the best choice for powering them. PubNub is used for real-time message delivery, metadata, presence, and other chat related data to facilitate the actions within the chat UI components.
PubNub is a great backend API for all types of chat applications because it offers a lot of functionality that you won’t have to build yourself. Some essential advantages are:
PubNub delivers billions of messages every day and will scale with your application as it grows.
Presence features are built-in. Easily create online and offline indicators and typing indicators.
Storage and Playback for message persistence. Persistence is essential for a complete user experience.
Mobile Push Notifications support for iOS and Android mobile apps. Keep users online by alerting them of new messages.
PubNub React Chat Components have PubNub services fully incorporated and are ready to use. It’s recommended that you’re familiar with React if you wish to modify these React components for use in your application. However, it’s possible to follow along, explore, and use these React Chat Components without prior experience.
Available React Chat Components
The following chat components are included with PubNub React Chat Components:
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.
Now that you have an understanding of the available components, let’s explore how you set up a development environment to try them out.
Creating a React development environment
Before you use PubNub React Chat Components, you need the tools necessary to build a chat application in React.
Set up a Node.js development environment
If you’ve already installed Node.js, you can skip to setting up Git.
This post requires you to install Node.js. To install Node.js you need to visit the Node.js Downloads page and select the installer for your platform.
Check the installation. Open your terminal and run the following commands to ensure Node.js is installed:
You should see a version number after you run these commands.
Set up Git
You need Git to clone the PubNub React Chat Components from the GitHub repo.
If you’ve already installed Git, you can skip to setting up a chat API for React Chat Components.
Even if you have Git installed you may want to ensure that it’s the latest version. Follow the Getting Started - Installing Git guide to install Git.
Next, check the Git installation. Open your terminal and run the following command to ensure Git is installed:
You should see a version number after you run the command.
Your development environment is now ready. Next, you need to configure your PubNub API keys for React Chat Components.
Setting up a chat API for React Chat Components
You’ll need to set up a PubNub account to use the PubNub React Chat Components. The end result will be two API keys that you’ll use in your chat application. A PubNub account and API keys are always free (perfect for startups).
You’ll first need to sign up for a PubNub account.
Sign in to your PubNub Dashboard.
Go to Apps.
Click Create New App.
Give your app a name, and select Chat App as the app type.
Click Create.
Click your new app to open its settings.
When you create a new app the first set of keys is generated automatically. However, a single app can have as many keysets as you like. PubNub recommends that you create separate keysets for production and test environments.
Select a keyset.
Enable the Channel Presence feature for your keyset.
Enable the Storage and Playback feature for your keyset.
Enable the Stream Controller feature for your keyset.
Enable the App Context feature for your keyset and select a region.
Save the changes.
Copy the Publish and Subscribe keys for the next steps.
Running the sample React Chat Components app
Now you’re ready to get started building with PubNub React Chat Components. The best way to start exploring is to run one of the sample chat component apps.
First, open your terminal and clone the React Chat Components repository. This repository contains the open source PubNub powered React chat components and sample apps.
Navigate into the samples folder.
Now you need to configure the components with the API keys you obtained from your PubNub dashboard. These keys allow you to send and receive messages on the PubNub Network with the PubNub Real-Time Messaging API. You must enable the Channel Presence feature, the Storage and Playback feature, Stream Controller feature, and App Context feature for your API keys for the chat components to work properly with full functionality.
Copy the .env.example file as .env. Then paste your Publish and Subscribe keys from the API keys you created in your PubNub Dashboard.
Navigate into the group-chat folder and install the dependencies. It’s normal for this process to take a few minutes to install the dependencies with npm.
Run the project and try out each of the components in the Sample Chat source code.
The React Component Chat samples should now open a html webpage at http://localhost:3000/react-chat-components/samples.
Open the Sample Chat web app. You should see the user interface and placeholder messages.
Try inputting text in the text input area in the user interface and press enter. You should see your message appear in the message list area.
Click on another channel to change channels. Start a direct chat by clicking on another user’s name.
Reference the PubNub Chat Components Documentation to learn more about how to use the chat app components.
How to use React Chat Components in your application
Now that you’ve seen how the components work together, you can include them in an existing React app.
Chat app component installation
First, Install the PubNub React Chat Components and all required dependencies using npm.
Using PubNub Chat App Components
Import PubNub, PubNub React Provider and the components.
Create your PubNub client and rest of the configuration for the Chat, which serves as a common context for all of the components:
Replace the placeholders “MY_PUBLISH_KEY_HERE” and “MY_SUBSCRIBE_KEY_HERE” with your Publish and Subscribe keys from the keyset you created from your PubNub Dashboard.
Pass the PubNub Provider with your newly created client.
Place the PubNub React Chat Components within the state provider in the order that your app requires. Components may be tweaked later by using option properties and CSS variables.
Explore the PubNub Chat Components Documentation to learn more about how to use PubNub React Chat Components in your React chat app.
Why use PubNub React Chat Components?
With PubNub React chat components you can build chat in a way that’s customized perfectly for your needs. PubNub provides a real-time publish/subscribe messaging API built on a global network. PubNub has multiple points of presence on every inhabited continent, supports dozens of SDKs, and has lots of features you’ll need in a chat application use case.
Use PubNub to build features into your application like:
Want to get started building live chat or messaging into your app today? Get in touch with our sales team to quickly get your in-app chat up and running.
