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.

Module	Provider	Context hook	UI 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.

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

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

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 prop	v2	v3
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 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)

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 prop	v2	v3
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 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)

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 prop	v2	v3
renderChannelTitle	({channel, user}) => React.ReactNode	() => React.ReactNode
renderMessageInput	({channel, user, disabled}) => React.ReactNode	() => React.ReactNode

Changed property names

v2	v3
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 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)

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

v2	v3
renderChannelProfile	renderOperatorUI, renderParticipantList

Added new props

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)

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

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.