Chat UIKit React v2
Chat UIKit React
Chat UIKit
React
Version 2
Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Common components

Copy link

You can implement UIKit for React by using the following components. These components support both open channels and group channels.


SendBirdProvider

Copy link

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 withSendBird() HOC or useSendbirdStateContext(), Sendbird Chat SDK for Javascript can be implemented in any component under the SendBirdProvider which has the following properties:

List of properties

Copy link
RequiredTypeDescription

appId

string

The APP_ID of the Sendbird application.

userId

string

The unique ID of the user.

OptionalTypeDescription

accessToken

string

The opaque string that identifies the user. It is recommended that every user has their own access token and provides it upon login for security. (Default: null)

theme

string

A style applied to the app. Available themes 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 filtered users and manually added users. (Default: Chat SDK's ApplicationUserListQuery)

stringSet

object

The set of strings for UIKit components. This can override the default language. (Default: null)

colorSet

object

The set of colors used in the UIKit themes. This can overrides the default theme. (Default: null)

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


withSendBird()

Copy link

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 or using sendBirdSelectors.getSdk()

const CustomReactComponentWithSendBirdConsumer = withSendBird(CustomReactComponent, mapStateToProps);

sendBirdSelectors

Copy link

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 listed below.

List of functions

Copy link
FunctionDescription

getConnect

Connects a user to Sendbird server.
Signature: (store) => (userId, accessToken) => Promise<(User, error)>

getDisconnect

Disconnects a user from Sendbird server.
Signature: (store) => (userId, accessToken) => Promise<(_, error)>

getUpdateUserInfo

Updates a user’s information such as nickname or profile image.
Signature: (store) => (userId, accessToken) => Promise<(User, error)>

getSdk

Returns the SDK instance of a user.
Signature:
(store) => sdk

getCreateChannel

Creates a new channel with params.
Signature: (store) => (GroupChannelParams) => Promise<(GroupChannel, error)>

getLeaveChannel

Leaves a channel.
Signature: (store) => (channelUrl) => Promise<(_, error)>

getSendUserMessage

Returns a promise chain which sends a user message to a specific channel.
Signature: (store) => (channelUrl, UserMessageParams) => Promise<(PendingMessage, error)> => Promise<(UserMessage, error)>

getSendFileMessage

Returns a promise chain to send a file message to a specific channel.
Signature: (store) => (channelUrl, FileMessageParams) => Promise<(PendingMessage, error)> => Promise<(FileMessage, error)>

getUpdateUserMessage

Updates a user message.
Signature: (store) => (channelUrl, messageId, UserMessageParams) => Promise<(UserMessage, error)>

getDeleteMessage

Deletes a user message.
Signature: (store) => (channelUrl, message) => Promise<(_, error)>

getResendUserMessage

Resends a failed user message.
Signature: (store) => (channelUrl, FailedUserMessage) => Promise<(Message, error)>

getResendFileMessage

Resends a failed file message.
Signature: (store) => (channelUrl, FailedFileMessage) => Promise<(FileMessage, error)>

The sample code below shows how to implement sendBirdSelectors with its properties.

getDisconnectgetSDKgetCreateChannel&moregetSendUserMessage&more
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 appId={appId} userId={userId}>
        <div>
            <ButtonWithSendBird />
        </div>
    </SendBirdProvider>
}

useSendbirdStateContext

Copy link

You can use the hook pattern to access the SendbirdProvider's internal state through useSendbirdStateContext. useSendbirdStateContext can be used along with selectors to easily implement various functionalities.

import React, { useEffect, useState } from "react";
import { useSendbirdStateContext, sendBirdSelectors } from "sendbird-uikit";
import { v4 as uuidv4 } from "uuid";
function CustomTypingIndicator(props) {
    const { currentChannelUrl } = props;
    const globalStore = useSendbirdStateContext();
    const sdkInstance = sendBirdSelectors.getSdk(globalStore);
    const sendMessage = sendBirdSelectors.getSendUserMessage(globalStore);
    const [indicator, setIndicator] = useState({
        show: false,
        name: null
    });
    useEffect(() => {
        const uuid = uuidv4();

        if (sdkInstance && sdkInstance.ChannelHandler && currentChannelUrl) {
            const channelHandler = new sdkInstance.ChannelHandler();
            channelHandler.onMessageReceived = (channel, message) => {
                if (channel.url !== currentChannelUrl) {
                    return;
                }
                setIndicator({
                    show: true,
                    name: message.sender
                });
                setTimeout(() => {
                    setIndicator({
                        show: false,
                        name: null
                    });
                }, 2000);
            };
            sdkInstance.addChannelHandler(uuid, channelHandler);
        }

        return () => {
            if (sdkInstance && sdkInstance.removeChannelHandler) {
                sdkInstance.removeChannelHandler(uuid);
            }
        };
    }, [sdkInstance, currentChannelUrl]);
    return (
        <div className="typing-indicator">
            {indicator.show ? `${indicator.name} is typing` : null}
            <button onClick={() => {
                const params = new sdkInstance.UserMessageParams();
                    params.message = "Hello World";
                    sendMessage(channelUrl, params)
                        .then((pendingMessage) => {
                            setLastMessage(pendingMessage);
                            alert('Message sent: pending', pendingMessage);
                            return pendingMessage;
                        })
                        .then(message => {
                            alert('Message sent: success', message);
                            setLastMessage(message);
                            console.warn(message);
                        })
                        .catch(e => {
                            console.warn(e);
                            alert('Couldnt send message');
                        })
            }} />
        </div>
    );
}
export default CustomTypingIndicator;