UIKit React v3
UIKit React
UIKit
React
Home
/
UIKit
/
React
This is the new Docs for UIKit v3 beta 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 && 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;