UIKit v3 beta for React is now available. 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 | useChannelList | ChannelListUI | |
ChannelProvider | useChannel | ChannelUI | |
ChannelSettingsProvider | useChannelSettings | ChannelSettingsUI | |
OpenChannelProvider | useOpenChannel | OpenChannelUI | |
OpenChannelSettingsProvider | useOpenChannelSettings | OpenChannelSettingsUI | |
MessageSearchProvider | useMessageSearch | MessageSearchUI | |
CreateChannelProvider | useCreateChannel | CreateChannelUI | |
EditUserProfileProvider | useEditUserProfileProvider | EditUserProfileUI |
See the breaking changes below for all modules.
The following table shows what common changes were made to the whole UIKit from v2 to v3.
v2 | 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 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: null) |
renderPlaceHolderLoading | ReactElement | Renders a customized placeholder for loading messages in the channel list. (Default: null) |
renderPlaceHolderEmptyList | ReactElement | Renders a customized placeholder message for when the channel list is empty. (Default: null) |
The Channel
smart component has now become Channel
module. See the codes below on how to import the new group channel module.
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 | v2 | 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: null) |
renderPlaceholderInvalid | ReactElement | Renders a customized placeholder for invalid channel state. (Default: null) |
renderPlaceholderEmpty | ReactElement | Renders a customized placeholder for an empty channel. (Default: null) |
renderChannelHeader | ReactElement | Renders a customized channel header component. (Default: null) |
renderMessage | ReactElement | Renders a customized message view in the channel. (Default: null) |
renderMessageInput | ReactElement | Renders a customized message input component. (Default: null) |
renderTypingIndicator | ReactElement | Renders a customized typing indicator component. (Default: null) |
renderCustomSeperator | ReactElement | Renders a customized date separator view in the message list component. (Default: null) |
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 | v2 | v3 |
---|---|---|
renderChannelProfile | ({ channel }) => React.ReactNode | () => React.ReactNode |
See the code below on how to render channel header with useChannelSettings
.
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: null) |
renderModerationPanel | ReactElement | Renders a customized view of the moderation panel that displays the moderation features for channel operators. (Default: null) |
renderLeaveChannel | ReactElement | Renders a customized leave channel button in the settings module. (Default: null) |
The OpenChannel
smart component has now become OpenChannel
module. See the codes below on how to import the new open channel module.
Render prop | v2 | v3 |
---|---|---|
renderChannelTitle | ({channel, user}) => React.ReactNode | () => React.ReactNode |
renderMessageInput | ({channel, user, disabled}) => React.ReactNode | () => React.ReactNode |
v2 | v3 |
---|---|
renderCustomMessage | renderMessage |
experimentalMessageLimit | messageLimit |
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.
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: null) |
renderHeader | ReactElement | Renders a customized channel header component. (Default: null) |
renderInput | ReactElement | Renders a customized message input component. (Default: null) |
renderPlaceholderEmptyList | ReactElement | Renders a customized placeholder for an empty channel. (Default: null) |
renderPlaceHolderError | ReactElement | Renders a customized placeholder for error messages that occur in the channel. (Default: null) |
renderPlaceholderLoading | ReactElement | Renders a customized placeholder for loading messages in the channel. (Default: null) |
The OpenChannelSettings
smart component has now become OpenChannelSettings
module. See the codes below on how to import the new open channel settings module.
v2 | 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: null) |
renderParticipantList | ReactElement | Renders a customized view of the channel settings for non-operator members. (Default: null) |
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: null) |
renderPlaceholderLoading | ReactElement | Renders a customized placeholder for loading messages in the search result. (Default: null) |
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: null) |
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.