UIKit React v3
UIKit React
UIKit
React
Home
/
UIKit
/
React
This is the new Docs for UIKit v3 for React. To see the previous Docs, click here.

Thread

Message threading is a feature in the UIKit that allows users to reply to each other's messages in a channel. When using the thread mode of message threading, users can reply to a message and start a new conversation in a separate thread. To display the thread view, use the Thread module.

Note : Threads is currently a beta feature that's still undergoing testing and development for improvement. Some inadvertent issues may arise while implementing this module. If you encounter any bugs or if you have any helpful feedback, contact our support team.


Usage

To start using the Thread module, implement the following code:

import Thread from '@sendbird/uikit-react/Thread';

List of properties

The following table lists the properties of the Thread module.

Properties
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. (Default: null)

message

UserMessage or FileMessage

Specifies the message in the group channel that the thread belongs to.

OptionalTypeDescription

onHeaderActionClick

function

Specifies the prop to execute custom operations when the close button in the ThreadHeader component is clicked.

onMoveToParentMessage

function

Specifies the prop to execute custom operations when the ThreadList component is initialized and the screen scrolls to the parent message.

disableUserProfile

boolean

Determines whether to display the user profile preview dialog when selecting the user avatar. If set to true, the user profile preview dialog is not shown. (Default: true)

renderUserProfile

ReactElement

Renders a customized user profile preview dialog when selecting the user avatar. (Default: null)

onUserProfileMessage

function

Specifies the prop to receive callback when a user has successfully created a 1-to-1 chat from clicking on a user profile view. (Default: null)

renderHeader

ReactElement

Renders a customized thread header component. (Default: null)

renderParentMessageInfo

ReactElement

Renders a customized parent message info component. (Default: null)

renderMessage

ReactElement

Renders a customized reply message in the thread list component. (Default: null)

renderMessageInput

ReactElement

Renders a customized message input component. (Default: null)

renderCustomSeparator

ReactElement

Renders a customized date separator in the thread list component. (Default: null)

renderParentMessageInfoPlaceholder

ReactElement

Renders a customized placeholder for a parent message info status in the thread view. It passes ParentMessageInfoStateTypes as a parameter. (Default: null)

renderThreadListPlaceHolder

ReactElement

Renders a customized placeholder for a thread list status in the thread view. It passes ThreadListStateTypes as a parameter. (Default: null)


Context

To store and handle data that are used to build a thread UI, Sendbird UIKit provides two context objects: ThreadProvider and useThreadContext. The ThreadProvider is a context provider that manages all the logic and data used in the message thread view. The useThreadContext is a context hook that allows access to the provider's data.

ThreadProvider

The ThreadProvider contains input props and internal data that handle all the operations in the module. The provider stores data from Chat SDK in real-time and exports them to the UI components. The following code shows how to start using ThreadProvider.

import { ThreadProvider } from '@sendbird/uikit-react/Thread/context';

const CustomThreadComponent = () => {
  return (
    <ThreadProvider
      channelUrl="..."
      message={message}
      onHeaderActionClick={() => {}}
      onMovetoParentMessage={({ message, channel }) => {}}
    >
      // <CustomThreadUI /> or <ThreadUI />
    </ThreadProvider>
  );
};

List of properties

The following table lists the properties of ThreadProvider.

Properties
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. (Default: null)

message

UserMessage or FileMessage

Specifies the message in the group channel that the thread belongs to.

OptionalTypeDescription

onHeaderActionClick

function

Specifies the prop to execute custom operations when the close button in the ThreadHeader component is clicked.

onMoveToParentMessage

function

Specifies the prop to execute custom operations when the ThreadList component is initialized and the screen scrolls to the parent message.

disableUserProfile

boolean

Determines whether to display the user profile preview dialog when selecting the user avatar. If set to true, the user profile preview dialog is not shown. (Default: true)

renderUserProfile

ReactElement

Renders a customized user profile preview dialog when selecting the user avatar. (Default: null)

onUserProfileMessage

function

Specifies the prop to receive callback when a user has successfully created a 1-to-1 chat from clicking on a user profile view. (Default: null)

useThreadContext

The useThreadContext hook exports the data in the provider to the UI components to create a functional view of message threads. Every UI component of any layer or level can get access to the data using the context hooks as long as they're inside the provider.

The following code shows how to start using useThreadContext.

import { useThreadContext } from '@sendbird/uikit-react/Thread/context';

See the code below on how to create the custom UI component using useThreadContext.

const CustomThreadUI = () => {
  const {
    channelState,
    currentChannel,
    parentMessageState,
    parentMessage,
    threadListState
    allThreadMessages,
    // ...
  } = useThreadContext();
  return (
    <div className="custom-thread-ui-component">
      // implement your component here
    </div>
  );
};

List of properties

The following table lists the properties of useThreadContext.

Property nameTypeDescription

currentChannel

GroupChannel

Specifies the current group channel.

channelState

string/enum

Specifices the state of the currentChannel data from the Chat SDK. Acceptable values are: NIL, LOADING, INVALID, and INITIALIZED. (Default: NIL)

parentMessage

UserMessage or FileMessage

Specifies the parent message of the thread.

parentMessageState

string/enum

Specifies the state of parentMessage data from the Chat SDK. Acceptable values are: NIL, LOADING, INVALID, and INITIALIZED. (Default: NIL)

allThreadedMessages

array of objects

Specifies a list of all threaded messages.

threadListState

string/enum

Specifies the state of allThreadedMessages data from the Chat SDK. Acceptable values are: NIL, LOADING, INVALID, and INITIALIZED. (Default: NIL)

hasMorePrev

boolean

Determines whether to retrieve previous replies at the top of the thread list.

hasMoreNext

boolean

Determines whether to retrieve more replies in the thread list.

emojiContainer

EmojiContainer

Specifies a set of all emojis that can be used and customized in the thread.

isMuted

boolean

Determines whether the channel that the thread exists in is muted or not.

isChannelFrozen

boolean

Determines whether the channel that the thread exists in is frozen or not.


UI components

The UI components in the Thread module are the following: ThreadUI, ThreadHeader, ParentMessageInfo, ThreadList, ThreadListItem, and ThreadMessageInput. They're the default set of UI components that compose the thread view.

ThreadUI

The ThreadUI is the component that displays the basic screen of the module. It contains placeholders for error and loading statuses and renders various components shown in the screen. The following code shows how to implement ThreadUI.

import ThreadUI from '@sendbird/uikit-react/Thread/components/ThreadUI';

List of properties

The following table lists the properties of ThreadUI.

Property nameTypeDescription

renderHeader

ReactElement

Renders a customized thread header component. (Default: null)

renderParentMessageInfo

ReactElement

Renders a customized parent message info component. (Default: null)

renderMessage

ReactElement

Renders a customized reply message in the thread list component. (Default: null)

renderMessageInput

ReactElement

Renders a customized message input component. (Default: null)

renderCustomSeparator

ReactElement

Renders a customized date separator in the thread list component. (Default: null)

renderParentMessageInfoPlaceholder

ReactElement

Renders a customized placeholder for a parent message info status in the thread view. It passes ParentMessageInfoStateTypes as a parameter. (Default: null)

renderThreadListPlaceHolder

ReactElement

Renders a customized placeholder for a thread list status in the thread view. It passes ThreadListStateTypes as a parameter. (Default: null)

See the code below on how to customize ThreadUI.

import { ThreadProvider } from '@sendbird/uikit-react/Thread/context';
import { ThreadListStateTypes } from '@sendbird/uikit-react/Thread/context/types';
import ThreadUI from '@sendbird/uikit-react/Thread/components/ThreadUI';

const CustomThreadComponent = () => {
  return (
    <ThreadProvider
      ...
    >
      // <CustomThreadUI /> or
      <ThreadUI
        renderMessage={({ message, chainTop, chainBottom, hasSeparator }) => {
          if (message.isUserMessage()) {
            return (
              <div className="thread-custom-user-message">
                // ...
              </div>
            );
          }
          return null;
        }}
        renderThreadListPlaceHolder={(type) => {
          if (type === ThreadListStateTypes.INVALID) {
            return (
              <div className="thread-custom-place-holder--error">
                // ...
              </div>
            );
          }
          return null;
        }}
        renderParentMessageInfoPlaceholder={(type) => {
          if (type === ThreadListStateTypes.NIL) {
            return (
              <div className="thread-custom-place-holder--empty">
                // ...
              </div>
            );
          }
          return null;
        }}
      />
    </ThreadProvider>
  );
};

ThreadHeader

The ThreadHeader is the header component of the ThreadUI that displays the thread title, channel name, and a close button that closes the thread view.

The following code shows how to implement ThreadHeader.

import ThreadHeader from '@sendbird/uikit-react/Thread/components/ThreadHeader';
Properties
RequiredTypeDescription

channelName

string

Specifies the name of the channel that the thread exits in.

OptionalTypeDescription

renderActionIcon

ReactElement

Renders a customized close button icon that closes the thread view.

onActionIconClick

function

Specifies the prop to execute custom operations when the top-right icon in the thread header component is clicked. (Default: null)

onChannelNameClick

function

Specifies the prop to execute custom operations when the channel name in the thread header component is clicked. (Default: null)

ParentMessageInfo

The ParentMessageInfo component shows the parent message in the thread view located right below ThreadHeader. See the code below on how to implement ParentMessageInfo.

import ParentMessageInfo from '@sendbird/uikit-react/Thread/components/ParentMessageInfo';

ThreadList

The ThreadList component shows the number of replies in the thread and a list of all replies to that message are shown in a chronological order. The list shows both user and file messages and replies sent by the current user are differentiated from those sent by other members in different colors. The following code shows how to implement ThreadList.

import ThreadList from '@sendbird/uikit-react/Thread/components/ThreadList';

List of properties

The following table lists the properties of ThreadList.

RequiredTypeDescription

allThreadedMessages

array of objects

Specifies a list of all threaded messages.

OptionalTypeDescription

renderMessage

ReactElement

Renders a customized reply message in the thread list component. (Default: null)

renderCustomSeparator

ReactElement

Renders a customized date separator in the thread list component. (Default: null)

See the code below on how to customize ThreadList.

import ThreadList from '@sendbird/uikit-react/Thread/components/ThreadList';
​
const customizedThreadList = () => {
  return (
    <ThreadList
      allThreadMessages={threadMessages}
      renderMessage={({ message, chainTop, chainBottom, hasSeparator }) => {}}
      renderCustomSeparator={({ message }) => {}}
      scrollRef={scrollRef}
      scrollBottom={scrollBottom}
    />
  )
}

ThreadListItem

The ThreadListItem displays each reply item, user and file message, in the ThreadList component.

import ThreadListItem from '@sendbird/uikit-react/Thread/components/ThreadListItem';

List of properties

The following table lists the properties of ThreadListItem.

RequiredTypeDescription

message

UserMessage or FileMessage

Specifies the message in the group channel that the thread belongs to.

OptionalTypeDescription

chainTop

boolean

Determines whether to group the message with previously sent messages. (Default: false)

chainBottom

boolean

Determines whether to group the message with other messages that were sent afterward. (Default: false)

hasSeparator

boolean

Determines whether to render a customized date separator view in the message list component that separates the messages by date. (Default: false)

renderCustomSeparator

ReactElement

Renders a customized date separator in the thread list component. (Default: null)

ThreadMessageInput

The ThreadMessageInput is the component where users can reply to a parent message in the thread by sending a user or file message such as an image, video, or a document file. See the code below on how to implement ThreadMessageInput.

import ThreadMessageInput from '@sendbird/uikit-react/MessageThread/components/ThreadMessageInput';