Move from Chat Components to Chat SDK
Chat Components is a package for PubNub’s JavaScript and React SDKs to quickly add UI and opinionated chat functionality to your existing React and React Native applications.
PubNub Chat SDK is a fully featured package with a similar purpose — to add chat to your application. Contrary to the Components, it does not provide any UI, which means the implementation might take a little bit more time, but it’s a lot more flexible. You can use it with any frontend or backend framework to develop the exact list of features your application needs.
In the simplest case, the basic setup could look like this:
- Chat Components
- Chat SDK
import React from "react";
import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import { Chat, MessageList, MessageInput } from "@pubnub/react-chat-components";
const pubnub = new PubNub({
publishKey: "myPublishKey",
subscribeKey: "mySubscribeKey",
userId: "myFirstUser",
});
const currentChannel = "Default";
const theme = "light";
import { useEffect, useState } from "react"
import { Chat } from "@pubnub/chat"
import { MyChat, MyMessageList, MyMessageInput } from "./components"
export default function App() {
const [chat, setChat] = useState<Chat>()
useEffect(() => {
async function initalizeChat() {
await Chat.init({
publishKey: "myPublishKey",
subscribeKey: "mySubscribeKey",
userId: "myFirstUser",
You may notice some differences in the provided code snippets:
- Chat SDK has no external dependencies, so installing and importing any other packages is unnecessary. JavaScript SDK is still being used, but it’s provided as an internal dependency that you can always access if needed.
- The function used to initialize the Chat SDK is asynchronous, meaning we have to handle it slightly differently.
- PubNubProvider is not required for the Chat SDK. You can still use React Context to provide a chat instance to various components, but any other method of sharing state will work as well.
- MyChat, MyMessageList, and MyMessageInput are now completely custom components you can design on your own.
Chat
In Chat Components, the "Chat" part is a wrapper holding some helper functions and most of the state needed in a chat application — a list of already fetched messages, information about users, the ID of a currently shown channel, and other.
In your application, you can adopt a similar approach or go in a completely different direction. In the React ecosystem, popular choices for state management include simply passing props, built-in React Context, and external libraries like Jotai, Recoil, Redux, Zustand, and MobX.
ChannelList and MemberList components
The two lists are fairly simple to implement from scratch, as there is no PubNub-related business logic involved.
These are UI-only, often called "dumb" components in the React ecosystem. They both accept an array of elements (including IDs, names, and descriptions) and render them in the form of a vertical list with some opinionated styles.
The source of data for similar components in your application in Chat SDK could be these methods:
chat.getUsers()
chat.getChannels()
Here are the links to the source files you can use to achieve a similar look and feel to Chat Components:
ChannelList:
For implementation details, check the documentation for React Chat Components, React Native Chat Components, and Chat SDK.
MemberList:
For implementation details, check the documentation for React Chat Components, React Native Chat Components, and Chat SDK.
MessageList
A message list component in a typical chat application has the most complex UI-related logic, especially scrolling behaviors. Other than that, the features requiring network integration in Chat Components were:
- Receiving messages in real time
- Fetching historical messages on load, and with an infinite scroll
- Adding and removing message reaction emojis
Some other features you might implement with Chat SDK are:
- Editing and removing messages
- Message threads
- Pinning messages
- Message forwarding to other channels
- Reporting users or messages
Here is a list of methods that you might want to use when implementing your message list component:
channel.connect()
channel.join()
channel.getHistory()
channel.forwardMessage()
channel.pinMessage()
channel.unpinMessage()
channel.getPinnedMessage()
channel.streamReadReceipts()
message.streamUpdates()
message.getMessageElements()
message.delete()
message.restore()
message.hasUserReaction()
message.toggleReaction()
message.forward()
Here are the links to the source files you can use to achieve a similar look and feel to Chat Components:
For implementation details, check the documentation for React Chat Components, React Native Chat Components, and various methods in Chat SDK.
MessageInput
Input to compose and send messages is one of the most important things to get right in your chat application. Depending on the feature list you’d like to support, it might be simple or really complex.
In Chat Components, the supported features that required network integration were:
- Sending unformatted text messages
- Sending messages with attached images and other types of files
- Automatic typing indicator
Some other features that you can also implement with our new Chat SDK are:
- Ability to mention users and channels
- Adding text links at specific parts of the text
- Quoting other messages
Here is a list of methods that you might want to use when implementing your message input component:
channel.sendText()
channel.startTyping()
channel.stopTyping()
channel.getTyping()
channel.getUserSuggestions()
channel.createMessageDraft()
chat.getChannelSuggestions()
messageDraft.onChange()
messageDraft.addMentionedUser()
messageDraft.removeMentionedUser()
messageDraft.addReferencedChannel()
messageDraft.removeReferencedChannel()
messageDraft.send()
messageDraft.getHighlightedMention()
messageDraft.addLinkedText()
Here are the links to the source files you can use to achieve a similar look and feel to Chat Components:
For implementation details, check the documentation for React Chat Components, React Native Chat Components, and various methods in Chat SDK.
Custom hooks
Apart from the UI components, the PubNub Chat Components package included a set of helpful React hooks that could have been mixed and matched with the provided components, or used entirely separately.
While there’s no React-specific code in our newest Chat SDK, you can implement similar hooks quite easily using the functions listed here:
For implementation details, check the documentation for React Chat Components, React Native Chat Components, and various methods in Chat SDK.