UIKit React v3

UIKit React

UIKit

React

Home

UIKit

React

This is the new Docs for UIKit v3 for React. To see the previous Docs, click here.

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 context = useSendbirdStateContext();
    const sdkInstance = sendbirdSelectors.getSdk(context);
    const sendMessage = sendbirdSelectors.getSendUserMessage(context);
    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;