Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

Group channel migration guide

Since UIKit for React v3.12.0, GroupChannel and GroupChannelList modules replaced Channel and ChannelList modules. The new modules support local caching capability, allowing you to experience a more efficient chat environment.

Import GroupChannel modules

See the following paths to import modules related to GroupChannel and GroupChannelList.

GroupChannelGroupChannelList

import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { GroupChannelProvider, useGroupChannel } from '@sendbird/uikit-react/GroupChannel/context';
import { GroupChannelHeader } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelHeader';
import { GroupChannelUI } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelUI';
import { FileViewer } from '@sendbird/uikit-react/GroupChannel/components/FileViewer';
import { FrozenNotification } from '@sendbird/uikit-react/GroupChannel/components/FrozenNotification';
import { Message } from '@sendbird/uikit-react/GroupChannel/components/Message';
import { MessageInputWrapper, VoiceMessageInputWrapper } from '@sendbird/uikit-react/GroupChannel/components/MessageInputWrapper';
import { MessageList } from '@sendbird/uikit-react/GroupChannel/components/MessageList';
import { RemoveMessageModal } from '@sendbird/uikit-react/GroupChannel/components/RemoveMessageModal';
import { TypingIndicator } from '@sendbird/uikit-react/GroupChannel/components/TypingIndicator';
import { UnreadCount } from '@sendbird/uikit-react/GroupChannel/components/UnreadCount';
import { SuggestedMentionList } from '@sendbird/uikit-react/GroupChannel/components/SuggestedMentionList';

Continue using channel modules

The App component now uses GroupChannel and GroupChannelList instead of Channel and ChannelList. However, if you wish to continue using Channel and ChannelList, use enableLegacyChannelModules to ensure the previous components are still available for use.

TSX

import SendbirdApp from '@sendbird/uikit-react/App'

const App = () => (
  <SendbirdApp
    // ...
    enableLegacyChannelModules
  />
)

Migrate ChannelList to GroupChannelList

When switching from ChannelList and ChannelListProvider to GroupChannelList and GroupChannelListProvider, take note of the following changes in props and context.

Changes in props

The following changes have been made to the props of GroupChannelList.

Added props

The following props were added.

Name	Type	Description
onChannelCreated	onChannelCreated: (channel: GroupChannel) => void	This callback function is invoked when a channel is created.

Previously, the onChannelSelect prop was used as a callback function that is invoked when a channel is selected and when it is created. The new onChannelCreated prop serves to separate the callback function for the two cases.

The following code snippet shows an example of using onChannelCreated to set the current channel when a new channel is created.

TSX

const App = () => {
  const [currentChannel, setCurrentChannel] = useState(null);

  const handleSetCurrentChannel = (channel: GroupChannel) => {
    setCurrentChannel(channel);
  };

  return (
    <div>
      <GroupChannelList
        onChannelSelect={handleSetCurrentChannel}
        onChannelCreated={handleSetCurrentChannel}
      />
      <GroupChannel
        channelUrl={currentChannel?.url ?? ''}
      />
    </div>
  )
}

Renamed props

The following props were renamed.

Previous	New	Description
activeChannelUrl	selectedChannelUrl	The name has been changed to align with the role of this prop. The type has been preserved.
onProfileEditSuccess	onUserProfileUpdated	The name has been changed to align with the role of this prop. The type has been preserved.
overrideInviteUser	onCreateChannelClick	The name has been changed to align with the role of this prop. The type has been preserved.
queries.channelListQuery	channelListQueryParams	The depth of props has been reduced by one level, the names of props have changed, and there have been changes in their types.

Removed props

The applicationUserListQuery that was previously contained within the queries props has been removed. You can now customize the applicationUserListQuery when creating a channel in the CreateChannel.

Changes in context

The following changes are made to the context provided by useGroupChannelList . Take note of it when switching from the ChannelListProvider to GroupChannelListProvider.

Added context

Name	Type	Description
refresh	() => Promise	A function to refresh the channel list. You can use it when you want to forcibly refresh the channel list.
refreshing	boolean	It becomes `true` while refreshing the channel list. It can be used to display a loading status UI during the refresh.

Renamed context

Previous context	New context	Description
allChannels	groupChannels	The name has been changed to align with the role of this context. The type has been preserved.
fetchChannelList	loadMore	The name has been changed to align with the role of this context. The type has been preserved.

Removed context

Context name	Description
channelListDispatcher	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
channelSource	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
currentUserId	Removed. Obtain this value through `SendbirdContext.`
loading	Removed. Use `initialized`.

Migrate Channel to GroupChannel

When switching from Channel and ChannelProvider to GroupChannel and GroupChannelProvider, review the following section and make necessary changes to the props and context.

Changes in props

The following changes have been made to the props.

Renamed props

Previous prop	New prop	Description
animatedMessage	animatedMessageId	The name has been changed to align with the role of this props. The type has been preserved.
onReplyInThread	onReplyInThreadClick	The function's parameter structure has been preserved.
queries.messageListParams	messageListQueryParams	The depth of props has been reduced by one level, the names of props have changed, and there have been changes in their types.

Changed behavior of props

Props	Previous	New
renderMessage	Customized all child components of within each message component.	Customizes the rendering of the entire message component in the message list component.

Previously, developers could modify or add children inside the message container as they saw fit. However, with the new renderMessage prop, developers can now customize the entire message component. This is a more holistic approach to customizing the message component, offering control over the entire message block within the message list.

PreviousNew

// Before
<Channel
  renderMessage={(props) => {
    return <div>{'my custom message child'}</div>;
  }}
/>;

Changed types in props

Props name	Previous Type	New type
onBeforeSendUserMessage	onBeforeSendUserMessage?(text: string, quotedMessage?: SendableMessageType): UserMessageCreateParams	onBeforeSendUserMessage?: (params: UserMessageCreateParams) => Promise
onBeforeSendFileMessage	onBeforeSendFileMessage?(file: File, quotedMessage?: SendableMessageType): FileMessageCreateParams	onBeforeSendFileMessage?: (params: FileMessageCreateParams) => Promise
onBeforeSendVoiceMessage	onBeforeSendVoiceMessage?: (file: File, quotedMessage?: SendableMessageType) => FileMessageCreateParams	onBeforeSendVoiceMessage?: (params: FileMessageCreateParams) => Promise
onBeforeSendMultipleFilesMessage	onBeforeSendMultipleFilesMessage?: (files: Array, quotedMessage?: SendableMessageType) => MultipleFilesMessageCreateParams	onBeforeSendMultipleFilesMessage?: (params: MultipleFilesMessageCreateParams) => Promise
onBeforeUpdateUserMessage	onBeforeUpdateUserMessage?(text: string): UserMessageUpdateParams	onBeforeUpdateUserMessage?: (params: UserMessageUpdateParams) => Promise

The following code is an example of migrating onBeforeSendUserMessage.

PreviousNew

// Before
<Channel
  onBeforeSendUserMessage={(text, quotedMessage) => {
    const params = new UserMessageCreateParams();
    params.message = text;
    params.parentMessageId = quotedMessage.messageId;
    params.customType = 'custom-type';
    return params;
  }}
/>

Removed props

Props name	Description
highlightedMessage	Removed. Highlighting message has been deprecated and merged to animating message.
onMessageHighlighted	Removed. Highlighting message has been deprecated and merged to animating message.
isLoading	Removed.
filterMessageList	Removed. Filter message using the `renderMessage` props.

The following is an example of using renderMessage props to filter messages.

tsx

<GroupChannel
  renderMessage={({ message }) => {
    if (message.type === 'filtered') return <></>; // render empty component.
    return null; // render default component.
  }}
/>

Changes in context

When using the GroupChannelProvider, use the useGroupChannel hook. Review the following section and make necessary changes when switching from the ChannelProvider and useChannelContext.

Added context

Context name	Type	Description
refresh	() => Promise	A function to refresh the message list. You can use it when you want to forcibly refresh the message list.
refreshing	boolean	It becomes `true` while refreshing the message list. It can be used to display a loading status UI during the refresh.
loadPrevious	() => Promise	A function to fetch previous messages. You can call it when the scroll is reached to the top.
loadNext	() => Promise	A function to fetch next messages. You can call it when the scroll is reached to the bottom.
scrollToBottom	() => Promise	If you want to scroll the message list to the bottom, you can call this function.

Renamed context

Previous context	New context	Description
allMessages	messages	The name has been changed to align with the role of this context. The type has been preserved.
sendMessage	sendUserMessage	Due to changes in the function parameter types, please refer to the following table for more details.
updateMessage	updateUserMessage	Due to changes in the function parameter types, please refer to the following table for more details.
hasMorePrev	hasPrevious	The type has been changed from `boolean` to `a function returning boolean`.
hasMoreNext	hasNext	The type has been changed from `boolean` to `a function returning boolean`.

Changed context types

Context name	Previous type	New type
sendUserMessage	(params: SendMessageParams) => void	(params: UserMessageCreateParams) => Promise
updateUserMessage	(params: UpdateMessageParams, callback?: (err: SendbirdError, message: UserMessage) => void) => void	(messageId: number, params: UserMessageUpdateParams) => Promise
sendFileMessage	(file: File, quoteMessage?: SendableMessageType) => Promise	sendFileMessage: (params: FileMessageCreateParams) => Promise
sendVoiceMessage	(file: File, duration: number, quoteMessage?: SendableMessageType) => Promise	(params: FileMessageCreateParams, duration: number) => Promise
sendMultipleFilesMessage	(files: Array, quoteMessage?: SendableMessageType) => Promise	(params: MultipleFilesMessageCreateParams) => Promise

The following is an example of migrating sendUserMessage.

PreviousNew

// Before
const { sendMessage } = useChannelContext();
sendMessage({
  message: message,
  quoteMessage: parentMessage,
  mentionedUsers: mentionedUsers,
  mentionTemplate: mentionTemplate,
});

Removed context

Context name	Description
localMessages	Removed. With the introduction of collections, there is no longer a need to distinguish between `allMessages` and `localMessages` based on the `sendingStatus` of messages.
messageDispatcher	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
messageActionTypes	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
oldestMessageTimeStamp	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
lastMessageTimeStamp	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
initialTimeStamp	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
setInitialTimeStamp	Removed. We no longer manage context using the dux pattern internally and rely on the logic of the Chat SDK collections.
isScrolled	Removed. The scrolling logic has been simplified and unified.
setIsScrolled	Removed. The scrolling logic has been simplified and unified.
onScrollCallback	Removed. The scrolling logic has been simplified and unified.
onScrollDownCallback	Removed. The scrolling logic has been simplified and unified.
emojiAllMap	Removed.

On this page

Import GroupChannel modules

Continue using channel modules

Migrate ChannelList to GroupChannelList

Changes in props Changes in context

Migrate Channel to GroupChannel

Changes in props Changes in context

Sample app