CreateIT
CreateIT
BLOG

Typing indicator in SendBird React

Ninja peeking from behind a smartphone with a chat window opened

Typing indicator in SendBird React

SHARE

Challenge:
add an animation when another chat member starts typing
Solution:
use channel.startTyping() and channelHandler.onTypingStatusUpdated()

Knowing when somebody has something to say and starts typing is a really interesting feature. You may know it from iMessage (a bubble with 3 dots appearing at the bottom of the chat) or from WhatsApp (text typing.. which appears under the sender’s name).

A lot of chats already have it built-in and SendBird Chat is one of them. It’s built into the default SDK library, but if you’re customizing your chat, it may have to be implemented from scratch. In this article, we will present a solution for having a typing indicator using the SendBird React UIKit.

Two chat windows next to each other

Sending a Typing Event

The first step is to handle the onChange event for message input. When the user starts typing, we should trigger the startTyping() event on a channel object. When input is empty (message sent or deleted), we should call endTyping(). Below we present the handleChange event handler:

// src/Chat/CustomizedMessageInput.jsx
function CustomizedMessageInput(props) {
    // event handler
    const handleChange = event => {
        setInputText(event.target.value);
        if (inputText.length > 0) {
            channel.startTyping();
        } else {
            channel.endTyping();
        }
    };
    return (
        <TextField
            id="customized-message-input"
            placeholder={'Enter Message'}
            type="txt"
            value={inputText}
            onChange={handleChange}
            multiline
        />
    );
}

Chats use the WebSocket connection. We can easily verify if our event is properly triggered, in the browser Developer Console / Network Tab / WS requests / Messages:

  • TPST – Typing Started
  • TPEN – Typing Ends

Multiple windows opened with a toolbar and code

Receiving the typing event

In order to display the “User 1 is typing…” animation, we’re going to use the channelHandler.onTypingStatusUpdated method. It returns an array of members that are currently typing.

// src/Chat/MessageReceived.jsx
useEffect(() => {
    const uuid = uuidv4();
    if (sdkInstance && sdkInstance.ChannelHandler && configStore.channelUrl) {
        const channelHandler = new sdkInstance.ChannelHandler();
        
        channelHandler.onTypingStatusUpdated = (channel) => {
            if (channel.url === configStore.channelUrl) {
                const members = channel.getTypingMembers();
                if(members.length && members[0] && members[0].nickname){
                   // show loader
                } else {
            // hide loader
                }
            }
        };
        sdkInstance.addChannelHandler(uuid, channelHandler);
    }
    return () => {
        if (sdkInstance && sdkInstance.removeChannelHandler) {
            sdkInstance.removeChannelHandler(uuid);
        }
    };
// eslint-disable-next-line
}, [sdkInstance, configStore]);

 

Two chat boxes next to each other

That’s it for today’s tutorial. Make sure to follow us for other useful tips and guidelines, and don’t forget to subscribe to our newsletter.

 

 

Need help?

  • Looking for support from experienced programmers?

  • Need to fix a bug in the code?

  • Want to customize your webste/application?

ADD COMMENT

Your email address will not be published.

createIT Contact