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;

Sample app