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;