SendbirdProvider

SendbirdProvider is the most important component in UIKit for React because it's the context provider that passes the Chat SDK down to the child components. The React Context API is used to easily pass down data through components. By using the useSendbirdStateContext() component, you can implement Sendbird Chat SDK for React in any of the components under SendbirdProvider. The following table shows a list of properties of the SendbirdProvider component.

Note: SendbirdProvider must be placed at the top level of your app.

List of properties

Properties

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

Optional	Type	Description
accessToken	string	Specifies an opaque string that identifies the user. It's recommended that every user has their own access token and provides it upon login for security. (Default: `null`)
theme	string	Specifies a style that's applied to the entire client app. Available themes are `light` and `dark`. (Default: `light`)
nickname	string	Specifies the user's nickname. (Default: `null`)
profileUrl	string	Specifies the URL of the user's profile image. (Default: `null`)
userListQuery	interface	Specifies the query factory class to retrieve a list of filtered users and manually added users. (Default: Chat SDK's `ApplicationUserListQuery`)
dateLocale	locale	Specifies the prop to localize the date and time of the current user's client app using Localization object from date-fns. (Default: `en-US`)
stringSet	object	Specifies a set of strings used in UIKit components. You can override the default language using the stringSet. (Default: `null`)
colorSet	object	Specifies a set of colors used in the UIKit themes. You can override the theme using the colorSet. (Default: `null`)
ThreadReplySelectType	function	Specifies the prop to direct users to view either the parent message or the thread when they click on a reply button in the group channel module. Acceptable values are: `PARENT` and `THREAD`.
onUserProfileMessage	function	Specifies the prop to handle the action when a user starts a 1-to-1 channel by clicking the message on a user profile icon. (Default: `null`)

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

useSendbirdStateContext

The useSendbirdStateContext component is a useState hook pattern that lets you access the internal state of sendbirdProvider. You can use the useSendbirdStateContext component with selectors to implement various functionalities such as sending a user message. Refer to the example codes below.

import React, { useEffect, useState } from "react";
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import useSendbirdStateContext from "@sendbird/uikit-react/useSendbirdStateContext";

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?.groupChannel?.addGroupChannelHandler && currentChannelUrl) {
                const channelHandlerConstructor = {};
                channelHandlerConstructor.onMessageReceived = (channel, message) => {
                    if (channel.url !== currentChannelUrl) {
                        return;
                    }
                    setIndicator({
                        show: true,
                        name: message.sender
                    });
                    setTimeout(() => {
                        setIndicator({
                            show: false,
                            name: null
                        });
                    }, 2000);
                };
                const channelHandler = new GroupChannelHandler(channelHandlerConstructor);
                sdkInstance.groupChannel.addGroupChannelHandler(uuid, channelHandler);
            }
            return () => {
                if (sdkInstance?.groupChannel?.removeChannelHandler) {
                    sdkInstance.groupChannel.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)
                        .onPending((pendingMessage) => {
                                setLastMessage(pendingMessage);
                                alert('Message sent: pending', pendingMessage);
                                return pendingMessage;
                        })
                        .onSucceeded(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

useSendbirdStateContext

Sample app