Customizing Components: React Custom Chat Components Series

Looking to get to market faster with a feature-rich chat app? PubNub’s React Chat Components give developers the building blocks they need to create React applications from scratch or add chat features to existing applications—all with just a few lines of code.

Previously, in part one and two of this tutorial series, we covered how PubNub’s React Chat Components are used in an existing sample app and how you can integrate components into any React chat app. 

In the final part of this tutorial, you’ll learn how to quickly and easily customize React Chat Components to fit your exact needs. To follow along with this tutorial, you’ll first want to ensure that you have completed the previous steps from this series.

Let's get started!

React Custom Chat Components API Setup

Picking up from our previous tutorial, you should be logged in to your PubNub Dashboard and have your API keys available to use. Make sure you have installed the components and all required dependencies using npm. 

The React SDK components you have previously added will appear in your react application. This includes: 

Chat: Required state provider.

Message List: Shows list of channel messages.

Message Input: Input for sending new messages.

Adding React Custom Chat App Components and Features

Now that you’re all caught up, you can begin to add custom components to your chat app. First, let's add typing indicators. 

Typing indicator

A typing indicator will subscribe to events generated by Message Input, tracking events, to display information about users that are currently typing messages. It can be displayed as a text denoting the user's name, or in a form similar to a message that can be rendered inside the Message List.

To add typing indicators, you will need to go to the sample React application in GitHub—this is where you will import the component into your own app. 

You will then need to add the typing indicator component to your user interface using these steps:

1. Specify that there is a typing indicator component in the Message Input component. 

2. Put the typing indicator component in the Message List. In this case, we will be using showAsMessage as an example. 

3. This puts a typing indicator inside the Message List component to render indicators as messages. However, this setting can also be customized to your preference. 

This will then reload your application and you will now see the typing indicator component in your application when a user is typing. 

You can find all of the available components specified here.

Message Persistence

Next, we will demonstrate how to integrate Message Persistence into your application, allowing you to store and retrieve messages as they get sent over the PubNub Network. 

1. First, head over to the Message List component. 

2. Configure fetchMessages and set a number from "0" to "100". This gives you the option to fetch past messages from storage and display them on a channel. 

3. Add that code to your Message List.

Following that, you will then see your Message Persistence displayed in your chat app. 

UI customization

In the final part of the tutorial video, we will cover a few of the themes that are available through PubNub and how they would look in this chat application. It is also important to note that exact looks can be tweaked later on with the use of CSS variables.

Here are the supported themes:

• Light (default)

• Dark

• Support

• Support-dark

• Event

• Event-dark

Ultimately with PubNub’s React Chat Components, you have the flexibility to customize these components to fit your needs. From a typing indicator timeout, to placeholder text, or enabling file uploads—we offer extensive options that give you full control over the look, feel, and functionality of your chat application. 

Go to market quickly with a feature-rich chat app

With PubNub’s React Chat Components, we’ve taken the most common chat features that we have seen our developers implement and provided you with a starting point to build chat that you are able to customize to your exact needs. 

You can use PubNub’s Chat Components for React to:

• Reduce implementation time with pre-built iOS SDKs, Android SDKs, and UI kits.

• Add chat features like direct and group messaging, typing indicators, reactions, and more without writing complex code.

• Customize design with built-in light and dark themes or create your own design from sample use cases like group chat and live event chat.

• Easily scale your app without worrying about backend infrastructure.  

Check out these additional docs and open source GitHub resources to import React Components:

• Build a Chat App with React Native SDK

• PubNub's Quickstart for JavaScript SDK

• PubNub Docs

Looking for more information about React Chat Components? Get in touch with our sales team and we’ll help you quickly get your chat app up and running.