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

Migration guide

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.


Modules

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.

ModuleProviderContext hookUI components

Channel list

ChannelListProvider

useChannelList

ChannelListUI

ChannelListHeader

ChannelPreview

Group channel

ChannelProvider

useChannel

ChannelUI

ChannelHeader

MessageInput

MessageList

Message

FileViewer

FrozenNotification

RemoveMessageModal

TypingIndicator

UnreadCount

Group channel settings

ChannelSettingsProvider

useChannelSettings

ChannelSettingsUI

AdminPanel

UserPanel

ChannelProfile

EditDetailsModal

LeaveChannel

UserListItem

Open channel

OpenChannelProvider

useOpenChannel

OpenChannelUI

OpenChannelHeader

OpenChannelInput

OpenChannelMessageList

OpenChannelMessage

FrozenChannelNotification

Open channel settings

OpenChannelSettingsProvider

useOpenChannelSettings

OpenChannelSettingsUI

OpenChannelProfile

OperatorUI

ParticipantUI

EditDetailsModal

Message search

MessageSearchProvider

useMessageSearch

MessageSearchUI

Create a channel

CreateChannelProvider

useCreateChannel

CreateChannelUI

InviteMembers

SelectChannelType

Edit user profile

EditUserProfileProvider

useEditUserProfileProvider

EditUserProfileUI


Breaking changes

See the breaking changes below for all modules.

Common changes

The following table shows what common changes were made to the whole UIKit from v2 to v3.

v2v3

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

ChannelList

The ChannelList smart component has now become ChannelList module. See the codes below on how to import the new channel list module.

import { ChannelList } from "sendbird-uikit";
import { ChannelList } from "@sendbird/uikit-react"

// Or use this code.
import ChannelList from "@sendbird/uikit-react/ChannelList"

Added new props

The following table lists properties that were added to the ChannelList module.

Property nameTypeDescription

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)

Channel

The Channel smart component has now become Channel module. See the codes below on how to import the new group channel module.

import { Channel } from "sendbird-uikit";
import { Channel } from "@sendbird/uikit-react"

// Or use this code.
import Channel from "@sendbird/uikit-react/Channel"

Removed render props

The following render props have been removed from UIKit v3:

  • renderCustomMessage
  • renderChatItem

Changed renderChatItem to renderMessage

See the code below on how to implement message-related actions in a group channel using the SendbirdSelectors component.

import { Channel, SendbirdProvider } from "sendbird-uikit";
import "@sendbird/uikit-react/dist/index.css";

const MyCustomChatMessage = ({ message, onDeleteMessage, onUpdateMessage }) => (
    <div>
        {message.message}
        <button onClick={() => {
            const callback = () => { console.warn('message deleted'); }
            onDeleteMessage(message, callback);
            }}
            > // Delete message.
        </button>
        <button onClick={() => {
            const updatedMessage = Math.random().toString();
            const callback = () => { console.warn('message updated'); }
            onUpdateMessage(message.messageId, updatedMessage, callback);
            }}
            > // Update message.
        </button>
    </div>
);

const App = () => (
    <SendbirdProvider appId={appId} userId={userId}>
        <div style={{ height: '500px' }}>
            <Channel channelUrl={channelUrl} renderChatItem={MyCustomChatMessage} />
        </div>
    </SendbirdProvider>
);
    <Channel renderMessage={MyFileMessageComponent} />
    const MyFileMessageComponent = ({ message, chainTop, chainBottom }) => {
        const {
            currentGroupChannel,
            scrollToMessage,
        } = useChannel();
        const globalStore = useSendbirdStateContext();
        // Use sendbirdSelectors and globalStore to implement onDeleteMessage, onUpdateMessage, onResendMessage.
        const deleteFileMessage = sendBirdSelectors.getDeleteMessage(globalStore);
        if (message.messageType === 'file') {
            return (
                <div className="custom-file-message">
                    <button
                        className="custom-file-message__delete-button"
                        onClick={deleteFileMessage(currentGroupChannel, message)}
                    />
                    ... // Implement your code here.
                </div>
            )
        }
        return null;
    }

Changed function signature

Render propv2v3

renderMessageInput

({ channel, user, disabled, quoteMessage }) => React.ReactNode

() => React.ReactNode

renderChannelHeader

renderChatHeader?: ({ channel, user }) => React.ReactNode

renderChannelHeader?: () => React.ReactNode

Changed how to render message input

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.

    <Channel renderMessageInput={MyMessageInput} />
    const MyMessageInput = ({message, chainTop, chainBottom }) => {
    const {
      currentGroupChannel,
        } = useChannel();
        const globalStore = useSendbirdStateContext();
        // Use `SendbirdSelectors` and `globalStore` to implement `getSendUserMessage` and `getSendFileMessage`.
        const sendMessage = sendBirdSelectors.getSendUserMessage(globalStore);
        return (
            ...
        );
    }

Changed how to render header

See the code below on how to render channel header with useChannel.

<Channel renderMessageInput={MyChannelHEader} />
    const MyChannelHEader = () => {
    const {
      currentGroupChannel,
        } = useChannel();
        const globalStore = useSendbirdStateContext();
        const user = globalStore?.stores?.userStore?.user;
        return (
            ...
        );
    }

Added new props

The following table lists properties that were added to the Channel module.

Property nameTypeDescription

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)

ChannelSettings

The ChannelSettings smart component has now become ChannelSettings module. See the codes below on how to import the new group channel settings module.

import { ChannelSettings } from "sendbird-uikit";
import { ChannelSettings } from "@sendbird/uikit-react"

// Or use this code.
import ChannelSettings from "@sendbird/uikit-react/ChannelSettings""

Changed function signature

Render propv2v3

renderChannelProfile

({ channel }) => React.ReactNode

() => React.ReactNode

Changed how to render channel profile

See the code below on how to render channel header with useChannelSettings.

<ChannelSettings
    renderChannelProfile={MyChannelProfile}
/>
const MyChannelProfile = () => {
    const { channel } = useChannelSettings();
    return (...);
}

Added new props

The following table lists properties that were added to the ChannelSettings module.

Property nameTypeDescription

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)

OpenChannel

The OpenChannel smart component has now become OpenChannel module. See the codes below on how to import the new open channel module.

import { OpenChannel } from "sendbird-uikit";
import { OpenChannel } from "@sendbird/uikit-react"

// Or use this code.
import OpenChannel from "@sendbird/uikit-react/OpenChannel"

Changed function signature

Render propv2v3

renderChannelTitle

({channel, user}) => React.ReactNode

() => React.ReactNode

renderMessageInput

({channel, user, disabled}) => React.ReactNode

() => React.ReactNode

Changed property names

v2v3

renderCustomMessage

renderMessage

experimentalMessageLimit

messageLimit

Changed how to render message, channel title, and message input

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.

    <OpenChannel renderInput={MyMessage} />
    const MyMessageInput = () => {
        // Use `useOpenChannel` to access current channel.
    const {
      currentOpenChannel,
        } = useOpenChannel();
        const globalStore = useSendbirdStateContext();
        // Use `SendbirdSelectors` and `globalStore` to implement `getOpenChannelSendUserMessage` and `getOpenChannelSendFileMessage`.
        const sendMessage = sendBirdSelectors.getOpenChannelSendUserMessage(globalStore);
        return (
            ...
        );
    }

Added new props

The following table lists properties that were added to the OpenChannel module.

Property nameTypeDescription

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)

OpenChannelSettings

The OpenChannelSettings smart component has now become OpenChannelSettings module. See the codes below on how to import the new open channel settings module.

import { OpenChannelSettings } from "sendbird-uikit";
import { OpenChannelSettings } from "@sendbird/uikit-react"

// Or use this code.
import OpenChannelSettings from "@sendbird/uikit-react/OpenChannelSettings"

Replaced renderChannelProfile

v2v3

renderChannelProfile

renderOperatorUI, renderParticipantList

Added new props

The following table lists properties that were added to the OpenChannelSettings module.

Property nameTypeDescription

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)

MessageSearch

The MessageSearch smart component has now become MessageSearch module. See the codes below on how to import the new message search module.

import { MessageSearch } from "sendbird-uikit";
import { MessageSearch } from "@sendbird/uikit-react""

// Or use this code.
import MessageSearch from "@sendbird/uikit-react/MessageSearch"

Added new props

The following table lists properties that were added to the MessageSearch module.

Property nameTypeDescription

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)


Added new modules

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.