UIKit v3 for React is now available. UIKit v3 has a dependency on Chat SDK v4. Before migrating from v2 to v3, refer to the migration guide of Chat SDK v4 for JavaScript for any breaking changes. The Chat SDK must be updated first before proceeding with the latest version of UIKit.
The biggest change from v2 to v3 is modularization, which allows you to build and customize views at a more minute level. You can execute key messaging functions, such as list channels, through modules. The smart components in v2 have now become modules that consist of separate providers and UI components. While the provider manages all the data of each module, the UI component renders user interfaces that are used to display the view of the module. The provider and UI components exchange data using context hooks. This new architecture allows for easier and more detailed customization.
When migrating from v2 to v3, there are several breaking changes you need to remember. While the properties of the smart components have relatively remained the same in the modules, some arguments in the render props have been removed. Refer to the breaking changes below.
You can execute key chat functions through various modules provided by UIKit for React. In each module, there is a provider, a set of pre-built UI components, and a context hook that allows access to the provider's data. Refer to the table below to see which modules we provide and the components that make up each module.
Module | Provider | Context hook | UI components |
---|---|---|---|
ChannelListProvider | useChannelListContext | ChannelListUI | |
ChannelProvider | useChannelContext | ChannelUI | |
ChannelSettingsProvider | useChannelSettingsContext | ChannelSettingsUI | |
OpenChannelProvider | useOpenChannelContext | OpenChannelUI | |
OpenChannelSettingsProvider | useOpenChannelSettingsContext | OpenChannelSettingsUI | |
MessageSearchProvider | useMessageSearchContext | MessageSearchUI | |
CreateChannelProvider | useCreateChannelContext | CreateChannelUI | |
EditUserProfileProvider | useEditUserProfileContext | EditUserProfileUI |
See the breaking changes below for sendbirdSelectors
and all modules.
The following table shows what common changes were made to the whole UIKit from v2 to v3.
From v2 | To v3 |
---|---|
npm install sendbird-uikit | npm i @sendbird/uikit-react |
sendbird-uikit/dist/index.css | @sendbird/uikit-react/dist/index.css |
SendBirdProvider | SendbirdProvider |
sendBirdSelectors | sendbirdSelectors |
withSendBird() | withSendbird() |
The import path for sendbirdSelectors
has changed after the name changed as shown in the code below.
A new interface called UIKitMessageHandler
has been added in sendbirdSelectors
for handling message events when sending a message. There are three options in the handler as shown in the code below.
The folllowing methods have been added for retrieving a channel instance.
Method name | Description |
---|---|
getGetGroupChannel | Specifies a method that returns a |
getGetOpenChannel | Specifies a method that returns a |
The getSendUserMessage
method and the getOpenChannelSendUserMessage
method have combined into one getSendUserMessage
. This method generates a function that returns UIKitMessageHandler
to send user messages in group channels and open channels.
The getSendFileMessage
method and the getOpenChannelSendFileMessage
method have combined into one getSendFileMessage
. This method generates a function that returns UIKitMessageHandler
to send file messages in group channels and open channels.
The parameter of getFreezeChannel
changed from channel-url
to GroupChannel
or OpenChannel
.
The parameter of getUnfreezeChannel
changed from channel-url
to GroupChannel
or OpenChannel
.
From v2 | To v3 |
---|---|
getCreateChannel | getCreateGroupChannel |
When you call the getCreateGroupChannel
method, it returns a Promise
instance to create a new group channel.
When you call the getCreateOpenChannel
method, it returns a Promise
instance to create a new open channel.
From v2 | To v3 |
---|---|
getEnterChannel | getEnterOpenChannel |
When you call the getEnterOpenChannel
method, it returns a Promise
instance to enter an open channel.
From v2 | To v3 |
---|---|
getExitChannel | getExitOpenChannel |
When you call the getExitOpenChannel
method, it returns a Promise
instance to exit an open channel.
The getUpdateUserMessage
method and the getOpenChannelUpdateUserMessage
method have combined into one getUpdateUserMessage
. This method generates a function that returns a Promise
instance to update user messages in group channels and open channels.
The getDeleteMessage
method and the getOpenChannelDeleteMessage
method have combined into one getDeleteMessage
. This method generates a function that returns a Promise
instance to delete messages in group channels and open channels.
The getResendUserMessage
method and the getOpenChannelResendUserMessage
method have combined into one getResendUserMessage
. This method generates a function that returns a Promise
instance to resend user messages in group channels and open channels.
The getResendFileMessage
method and the getOpenChannelResendFileMessage
method have combined into one getResendFileMessage
. This method generates a function that returns a Promise
instance to resend file messages in group channels and open channels.
The ChannelList
smart component has now become ChannelList
module. See the codes below on how to import the new channel list module.
The following table lists properties that were added to the ChannelList
module.
Property name | Type | Description |
---|---|---|
renderPlaceHolderError | ReactElement | Renders a customized placeholder for error messages in the channel list. (Default: |
renderPlaceHolderLoading | ReactElement | Renders a customized placeholder for loading messages in the channel list. (Default: |
renderPlaceHolderEmptyList | ReactElement | Renders a customized placeholder message for when the channel list is empty. (Default: |
The Channel
smart component has now become Channel
module. See the codes below on how to import the new group channel module.
The following table lists properties of the Channel
module that were renamed.
From v2 | To v3 |
---|---|
useReaction | isReactionEnabled |
useMessageGrouping | isMessageGroupingEnabled |
The following render props have been removed from UIKit v3:
renderCustomMessage
renderChatItem
See the code below on how to implement message-related actions in a group channel using the sendbirdSelectors
component.
Render prop | From v2 | To v3 |
---|---|---|
renderMessageInput | ({ channel, user, disabled, quoteMessage }) => React.ReactNode | () => React.ReactNode |
renderChannelHeader | renderChatHeader?: ({ channel, user }) => React.ReactNode | renderChannelHeader?: () => React.ReactNode |
See the code below on how to render the MessageInput
component with useChannel
context hook and implement message-related actions in the channel using the sendbirdSelectors
component.
See the code below on how to render channel header with useChannel
.
The following table lists properties that were added to the Channel
module.
Property name | Type | Description |
---|---|---|
renderPlaceholderLoader | ReactElement | Renders a customized placeholder for loading messages in the channel. (Default: |
renderPlaceholderInvalid | ReactElement | Renders a customized placeholder for invalid channel state. (Default: |
renderPlaceholderEmpty | ReactElement | Renders a customized placeholder for an empty channel. (Default: |
renderChannelHeader | ReactElement | Renders a customized channel header component. (Default: |
renderMessage | ReactElement | Renders a customized message view in the channel. (Default: |
renderMessageInput | ReactElement | Renders a customized message input component. (Default: |
renderTypingIndicator | ReactElement | Renders a customized typing indicator component. (Default: |
renderCustomSeperator | ReactElement | Renders a customized date separator view in the message list component. (Default: |
The ChannelSettings
smart component has now become ChannelSettings
module. See the codes below on how to import the new group channel settings module.
Render prop | From v2 | To v3 |
---|---|---|
renderChannelProfile | ({ channel }) => React.ReactNode | () => React.ReactNode |
See the code below on how to render channel header with useChannelSettingsContext
.
The following table lists properties that were added to the ChannelSettings
module.
Property name | Type | Description |
---|---|---|
renderPlaceHolderError | ReactElement | Renders a customized placeholder for error messages that occur in the channel settings menu. (Default: |
renderModerationPanel | ReactElement | Renders a customized view of the moderation panel that displays the moderation tools for channel operators. (Default: |
renderexitChannel | ReactElement | Renders a customized leave channel button in the settings module. (Default: |
The OpenChannel
smart component has now become OpenChannel
module. See the codes below on how to import the new open channel module.
Render prop | From v2 | To v3 |
---|---|---|
renderChannelTitle | ({channel, user}) => React.ReactNode | () => React.ReactNode |
renderMessageInput | ({channel, user, disabled}) => React.ReactNode | () => React.ReactNode |
From v2 | To v3 |
---|---|
renderCustomMessage | renderMessage |
experimentalMessageLimit | messageLimit |
useReaction | isReactionEnabled |
useMessageGrouping | isMessageGroupingEnabled |
See the code below on how to render the MessageInput
component with useOpenChannelContext
context hook and implement message-related actions in the channel using the sendbirdSelectors
component.
The following table lists properties that were added to the OpenChannel
module.
Property name | Type | Description |
---|---|---|
renderMessage | ReactElement | Renders a customized message view in the channel. (Default: |
renderHeader | ReactElement | Renders a customized channel header component. (Default: |
renderInput | ReactElement | Renders a customized message input component. (Default: |
renderPlaceholderEmptyList | ReactElement | Renders a customized placeholder for an empty channel. (Default: |
renderPlaceHolderError | ReactElement | Renders a customized placeholder for error messages that occur in the channel. (Default: |
renderPlaceholderLoading | ReactElement | Renders a customized placeholder for loading messages in the channel. (Default: |
The OpenChannelSettings
smart component has now become OpenChannelSettings
module. See the codes below on how to import the new open channel settings module.
From v2 | To v3 |
---|---|
renderChannelProfile | renderOperatorUI, renderParticipantList |
The following table lists properties that were added to the OpenChannelSettings
module.
Property name | Type | Description |
---|---|---|
renderOperatorUI | ReactElement | Renders a customized view of the channel settings for operators. (Default: |
renderParticipantList | ReactElement | Renders a customized view of the channel settings for non-operator members. (Default: |
The MessageSearch
smart component has now become MessageSearch
module. See the codes below on how to import the new message search module.
The following table lists properties that were added to the MessageSearch
module.
Property name | Type | Description |
---|---|---|
renderPlaceHolderError | ReactElement | Renders a customized placeholder for error messages that occur in the search result. (Default: |
renderPlaceholderLoading | ReactElement | Renders a customized placeholder for loading messages in the search result. (Default: |
renderPlaceHolderNoString | ReactElement | Renders a customized placeholder for when there are no messages that match the search query. |
renderPlaceholderEmptyList | ReactElement | Renders a customized placeholder for an empty list of search results. (Default: |
In v3, CreateChannel
module and EditUserProfile
module have been added. Go to the Create a channel page and Edit user profile page to learn more.