Typing indicator

Typing indicator is a feature that allows users to know visually if another user in the channel is typing a message. The indicator UI appears in the ChannelHeader component of the Channel module and in the ChannelPreview component of the ChannelList module. The indicator remains visible until the user sends the message or deletes the text completely. If the user stops typing for more than 10 seconds, the indicator will also disappear.

To view the image in full screen, click on the

In order to use the typing indicator feature, you must first create a channel and enable the chat service. Once chat is turned on, the typing indicator feature is turned on by default through the setUseTypingIndicator() setter method of the ChannelFragment.Builder class or ChannelHeaderComponent.Params class. To learn how to allow users to chat in a channel, refer to the Channel module page.

While the typing indicator feature is turned on by default in the Channel module, you need to set the feature's setter method to true in the ChannelList module. Implement the code below to turn on the typing indicator in a channel list view.

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import ChannelList from '@sendbird/uikit-react/ChannelList';
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';

// Using SendbirdProvider
const CustomApp = () => {
  return (
    <SendbirdProvider
      // ...
      isTypingIndicatorEnabledOnChannelList
    >
      {/* implement custom app with useSendbirdStateContext() */}
    </SendbirdProvider>
  );
};

// Using ChannelList
const UseChannelList = () => {
  return (
    <ChannelList
      // ...
      isTypingIndicatorEnabled
    />
  );
};

// Using ChannelListProvider
const CustomChannelList = () => {
  return (
    <ChannelListProvider
      // ...
      isTypingIndicatorEnabled
    >
      {/* implement channel list with useChannelListContext() */}
    </ChannelListProvider>
  );
};

The UI for typing indicator can be customized through the stringSet, which is a set of strings used to compose the screen. Text strings for typing status can vary depending on the number of members typing in a channel.

• If one member is typing: “Member is typing...”
• If two members are simultaneously typing: “Member A and Member B are typing...”
• If more than two members are simultaneously typing: “Several people are typing...”

The following table shows a customizable property of stringSet that appears in the ChannelHeader component.