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

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

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

Required	Type	Description
appId	string	The `APP_ID` of the Sendbird application.
userId	string	The unique ID of the user.

Optional	Type	Description
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()

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

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

Function	Description
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

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;

On this page

SendBirdProvider withSendBird()sendBirdSelectors useSendbirdStateContext

Sample app