Move from Chat Components to Chat SDK

PubNub React Components is a package for PubNub’s JavaScript and React SDKs. It helps you quickly add UI and opinionated chat features to your React and React Native apps.

The PubNub Chat SDK is a fully featured package with a similar goal: add chat to your app. Unlike Components, the Chat SDK provides no UI. Implementation can take more time, but you gain flexibility. You can use it with any frontend or backend framework to build the features your app needs. For Chat SDK details, see the Chat SDK overview.

In the simplest case, set up looks like this.

Chat Components

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";

show all 28 lines

Chat SDK

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",

show all 29 lines

Notable differences in the snippets:

• The Chat SDK has no external UI dependencies. The JavaScript SDK is still used, but as an internal dependency you can access when needed.
• Chat SDK initialization is asynchronous, so you handle it differently.
• PubNubProvider is not required. You can still use React Context to share a chat instance, or any other state method.
• MyChat, MyMessageList, and MyMessageInput are your custom components.

Chat

In React Components, the Chat wrapper held helper functions and most chat state: fetched messages, user info, current channel ID, and more.

In your app, you can follow a similar pattern or choose another. In React, common state options include props, built‑in Context, or libraries like Jotai, Recoil, Redux, Zustand, and MobX.

ChannelList and MemberList components

These lists are simple to build from scratch. They contain no PubNub logic.

They are UI‑only “dumb” components. Each accepts an array of items (IDs, names, descriptions) and renders a vertical list with opinionated styles.

In the Chat SDK, similar data can come from:

chat.getUsers()
chat.getChannels()

Source files to achieve a look and feel similar to React Components:

• ChannelList:
  • Hook
  • React component
  • React Native component
  • getChannels()

See also: React Chat Components, React Native Chat Components, and Chat SDK.

• MemberList:
  • Hook
  • React component
  • React Native component
  • getUsers()

See also: React Chat Components, React Native Chat Components, and Chat SDK.

MessageList

A message list has the most complex UI logic, especially scrolling. In React Components, network features included:

• Receiving messages in real time
• Fetching history on load and with infinite scroll
• Adding and removing message action emojis

With the Chat SDK, you can also add:

• Editing and removing messages
• Message threads
• Pinning messages
• Forwarding messages
• Reporting users or messages

Helpful methods for a message list:

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()

show all 20 lines

Source files to replicate React Components behavior:

• Hook
• React component
• React native component
• Chat SDK methods

See also: React Chat Components, React Native Chat Components, and Chat SDK.

MessageInput

Message input is critical for a chat app. Scope depends on your features.

In React Components, network features included:

• Sending unformatted text messages
• Sending messages with images and other files
• Automatic typing indicators

With the Chat SDK, you can also add:

• Mentions for users and channels
• Linked text
• Quoting other messages

Helpful methods for a message input:

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()

show all 19 lines

Source files to replicate React Components behavior:

• Hook
• React component
• React native component
• Chat SDK methods

See also: React Chat Components, React Native Chat Components, and Chat SDK.

Custom hooks

PubNub React Components also included helpful React hooks. You could use them with components or on their own.

The Chat SDK has no React‑specific code. You can implement similar hooks using the functions listed here:

Chat Components	Chat SDK
useChannels	chat.getChannels and channel.streamUpdates / channel.streamUpdatesOn
useUsers	chat.getUsers and user.streamUpdates / user.streamUpdatesOn
useUser	chat.getUser and user.streamUpdates / user.streamUpdatesOn
useChannelMembers	channel.getMembers and channel.streamUpdates / channel.streamUpdatesOn
useUserMemberships	user.getMemberships and user.streamUpdates / user.streamUpdatesOn
usePresence	channel.whoIsPresent and channel.streamPresence
useSubscribe	channel.connect / channel.join
useMessages	channel.getHistory, channel.connect / channel.join and message.streamUpdates / message.streamUpdatesOn

See also: React Chat Components, React Native Chat Components, and various methods in Chat SDK.