JavaScript
Ui Kit Key Functions

Key Functions

This page explains key functions of Sendbird UIKit for React consisting of how to list channels, chat in a channel, configure channel settings, create a channel, and invite users.


Components

Implement UIKit for React by using the following components.

SendBirdProvider

SendBirdProvider is the context provider that passes the Chat SDK down to the child components, and is the most important component in UIKit for React. The React Context API is used to easily pass down data through components. By using the withSendBird() HOC, Sendbird Chat SDK for Javascript can be implemented in any component under the SendBirdProvider which has the following properties:

Properties
RequiredTypeDescription

appId

string

The APP_ID of the Sendbird application.

userId

string

The unique ID of the user.

OptionalTypeDescription

accessToken

string

The access token for the user. (Default: null)

theme

string

The themes available are light and dark. (Default: light)

nickname

string

The user’s nickname. (Default: null)

profileUrl

string

The URL of the user’s profile image. (Default: null)

userListQuery

interface

The query factory class to retrieve a list of custom users. (Default: Chat SDK's ApplicationUserListQuery)

Note : The App component internally manages the SendBirdProvider as well as other components and can be used to configure the above properties.

withSendBird()

The withSendBird() is an HOC that helps you access data in the Chat SDK, and internally supports the Channel, ChannelList and ChannelSettings. Using the withSendBird(), data stored in the SendBirdProvider state, which is stored through the React Context API, can be accessed. The withSendBird() can be used to not only implement chat features, but also to access stored data for further customization.

Note : The Chat SDK can be accessed at state.stores.sdkStore.sdk

Light Color Skin
Copy
const CustomReactComponentWithSendBirdConsumer = withSendBird(CustomReactComponent, mapStateToProps);

sendBirdSelectors

sendBirdSelectors provides many useful selectors to perform various data operations and can also be used to write customized selectors. The main functionalities of sendBirdSelectors regarding the Chat SDK are:

FunctionDescription

sendbirdSelectors.getConnect

Connects a user to Sendbird server.

sendbirdSelectors.getDisconnect

Disconnects a user from Sendbird server.

sendbirdSelectors.getUpdateUserInfo

Updates a user’s nickname or profile image.

Light Color Skin
Copy
import {
    SendBirdProvider,
    withSendBird,
    sendbirdSelectors,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const MyButton = (props) => {
    <button
        onClick={() =>
            props.disconnect().then((reject, response) => { ... });
        }
    >
    Disconnect
    </button>
}

const ButtonWithSendBird = withSendBird(MyButton, (state) => {
    disconnect: sendbirdSelectors.getDisconnect(state),
});

const App = () => {
    <SendBirdProvider userId={userId} appId={appId} ...>
        <div>
            ...
            ...
            <ButtonWithSendBird />
        </div>
    </SendBirdProvider>
}

App

App component is a collection of all UIKit components needed to implement chat, and only requires the app ID and user ID to be configured.

Properties
RequiredTypeDescription

appId

string

The APP_ID of the Sendbird application.

userId

string

The unique ID of the user.

OptionalTypeDescription

accessToken

string

The access token for the user. (Default: null)

theme

string

The themes available are light and dark. (Default: light)

nickname

string

The user’s nickname. (Default: null)

profileUrl

string

The URL of the user’s profile image. (Default: null)

userListQuery

interface

The query factory class to retrieve a list of custom users. (Default: Chat SDK's ApplicationUserListQuery)

Light Color Skin
Copy
// Create a chat application

import { App } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const MyApp = () => {
    <Route id={'/chat'}>
        <App
            userId={userId}
            appId={appId}
            nickname={nickname}
            profileUrl={profileUrl}
            accessToken={accessToken}
            theme={theme}
            userListQuery={userListQuery}
        />
    </div>
}

Customize the user list

When creating a channel or inviting users to a channel, UIKit shows the user list page to enable user selection. The user list can be customized by receiving the UserListQuery implementation in the SendBirdProvider. If not given, all the users in the application are fetched through the Chat SDK’s ApplicationUserListQuery by default. Implement the UserListQuery as follows:

Light Color Skin
Copy
interface UserListQuery {
    hasNext: boolean;
    next(callback): void;
}

Implement the interface as follows:

Light Color Skin
Copy
// A member must have these three properties and the userId must be unique.
const Member = () => ({
    userId,
    profileUrl,
    nickname,
});

class CustomUserPaginatedQuery {
    constructor() {
        // Required public property to determine if more data is available.
        this.hasNext = false;
    }

    // Required public property.
    next(callback) {
        // Make async call and get list of users
        const [users, error] = myAsyncCallToGenerateMembers();
        // Set this.hasNext
        this.hasNext = setTrueIfMoreMembersCanBeFetched();
        callback(users, error);
    }
}

const CustomUserPaginatedQueryFactory = () => new CustomUserPaginatedQuery();

Apply the query as follows:

Light Color Skin
Copy
import { App } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const MyApp = () => {
    <Route id={'/chat'}>
        <App userId=? appId=? userListQuery={CustomUserPaginatedQueryFactory} />
    </div>
}

List channels

You can list channels by using the ChannelList component. Once a client app is connected to Sendbird server, the list of channels in the client app will be displayed by passing the ChannelList.

ChannelList

How to use

In order to use the ChannelList, it must be included in the SendBirdProvider. If the SendBirdProvider is placed at the top level, you can use the ChannelList anywhere in your application. The ChannelList has no minimum height and follows the height of the container, so it is recommended to specify the height of the wrapper element to fit your needs.

Properties
OptionalTypeDescription

onChannelSelect

function

The callback function which lists the group channel selected by the user. (Default: null)

renderChannelPreview

ReactElement

A custom component to replace the default channel component. The following properties are given:
- channel: GroupChannel
- onLeaveChannel: function(channel, callback)

Sample implementation code
Light Color Skin
Copy
import { ChannelList, SendBirdProvider} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const MyCustomPreview = ({ channel, onLeaveChannel }) => (
    <div style={{ border: '1px solid gray' }}>
        <img height="20px" width="20px" src={channel.coverUrl} />
        <button 
            onClick={() => {
                const leaveChannelCb = () => {
                    console.warn('Leave channel success')
                };
                onLeaveChannel(channel, leaveChannelCb);
            }}
            >Leave
        </button>
    </div>
);


const App = () => (
    <SendBirdProvider appId={appId} userId={userId}>
        <div style={{ height: '520px' }}>
            <ChannelList
                renderChannelPreview={MyCustomPreview}
                onChannelSelect={(channel) => { console.warn(channel); }}
            />
        </div>
    </SendBirdProvider>
);

Chat in a channel

Configure to display channel messages using the Channel component. Similar to the ChannelList, the Channel component also must be included in the SendBirdProvider. If you place the SendBirdProvider on the top level, you can use the Channel anywhere in your application. The Channel has no minimum height and follows the height of the container, so it is recommended to specify the height of the wrapper element to fit your needs.

Channel

How to use

Use the following code to import Channel:

Properties
RequiredTypeDescription

channelUrl

string

The unique URL of the channel.

OptionalTypeDescription

onChatHeaderActionClick

function

The callback function which is called when the top-right icon on the header has been clicked. (Default: null)

renderChatItem

ReactElement

A custom component to replace the default message component. The following properties are given:
- channel: GroupChannel
- message: BaseMessage
- onUpdateMessage: function(messageId, newMessageText, callback)
- onDeleteMessage: function(message, callback)

Sample implementation code
Light Color Skin
Copy
import { Channel, SendBirdProvider } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const MyCustomChatMessage = ({ message, onDeleteMessage, onUpdateMessage }) => (
    <div>
        {message.message}
        <button 
            onClick={() => {
                const onDeleteCb = () => { console.warn('message deleted'); }
                onDeleteMessage(message, onDeleteCb);
            }}
            >delete
        </button>
        <button
            onClick={() => {
                Const updatedMessage = Math.random().toString();
                const onUpdateCb = () => { console.warn('message updated'); }
                onUpdateMessage(message.messageId, updatedMessage, onUpdateCb);
            }}
            >update
        </button>
    </div>
);

const App = () => (
    <SendBirdProvider appId={appId} userId={userId}>
        <div style={{ height: '500px' }}>
            <Channel channelUrl={channelUrl} renderChatItem={MyCustomChatMessage} />
        </div>
    </SendBirdProvider>
);

Configure channel settings

Use the ChannelSettings component to show a list of channels or create a channel. Similar to the ChannelList and Channel, the ChannelSettings component also must be included in the SendBirdProvider. When the height of your wrapper component is specified, the ChannelList will assume this height. If you want to adjust width or other visual properties, you may need to use CSS.

ChannelSettings

How to use

Use the following code to import ChannelSettings:

Properties
RequiredTypeDescription

channelUrl

string

The unique URL of the channel.

OptionalTypeDescription

onCloseClick

function

The callback function which is called when the close button has been clicked. (Default: null)

onChannelModified

function

The callback function which is called when a channel has been modified. (Default: null)

Sample implementation code
Light Color Skin
Copy
import { ChannelSettings, SendBirdProvider } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 


const App = () => {
    <SendBirdProvider appId={appId} userId={userId}>
        <div style={{ height: '600px', textAlign: 'center' }}>
            <ChannelSettings
                channelUrl={channelUrl}
                onChannelModified-{channel => {...}}
                onCloseClick={() => { setShowSettings(false); }}
            />
        </div>
    </SendBirdProvider>
};

Invite users

Custom user list can be implemented to the chat to create a new group chat or an 1-on-1 chat. You can also implement how to invite new members to your chat.

The ApplicationUserListQuery is used to invite users by default. Another way to invite users is fetching data to the App or SendBirdProvider components by passing a function. The implementation can be done by following the below sample code:

Sample implementation code
Light Color Skin
Copy
// A member must have these three properties and userId must be unique
const Member = () => ({
    userId,
    profileUrl,
    nickname,
});

class CustomUserPaginatedQuery {
    constructor() {
        // Required public property to determine if more data is available.
        this.hasNext = false;
    }

    // Required public property
    next(callback) {
        // Make an async call and get list of users.
        const [users, error] = myAsyncCallToGenerateMembers();
        // Set this.hasNext
        this.hasNext = setTrueIfMoreMembersCanBeFetched();
        callback(users, error);
    }
}

const getCustomPaginatedQuery = () => new CustomPaginatedQuery();

import { App } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const MyApp = () => {
    <Route id={'/chat'}>
        <App userId={userId} appId={appId} userListQuery={getCustomPaginatedQuery} />
    </div>
}