Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Typing indicator

Copy link

Typing indicator is a feature that allows users to know visually if another user in the channel is typing a message. The indicator remains visible until the user sends the message or deletes the text completely. It will also disappear when the user stops typing for more than 10 seconds.


We support two types of typing indicators: Text and Bubble.

The text typing indicator can be used in the following places.

Bubble

Copy link

The bubble typing indicator can be used in the following place.

Note that the bubble typing indicator is not supported in the ChannelList module.


How to use in channel

Copy link

You can enable text and bubble typing indicators in your channel by following the code below. By default, the Text type of typing indicator is turned on. However, you can also enable the Bubble type here, or use both types at the same time.

<App
  appId={appId} 
  userId={userId}
  uikitOptions={{
    groupChannel: {
      // Below turns on both bubble and text typing indicators. Default is Text only.
      typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
    }
  }}
/>

How to use in channel list

Copy link

You can enable the text typing indicator in the channel list by following the code below. You need to set the feature's setter method to true in the ChannelList module. The bubble typing indicator is not supported in this module.

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
      uikitOptions={{
        groupChannel: {
          enableTypingIndicator: true,
        },
        groupChannelList: {
          enableTypingIndicator: true,
        },
      }}
    >
      {/* 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>
  );
};

Customize the text typing indicator UI

Copy link

The UI for the text 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...”

stringSet for ChannelHeader

Copy link

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

KeyStringDescription

TYPING_INDICATOR__IS_TYPING

is typing...

A text that indicates a channel member is typing a message in the message input field.

TYPING_INDICATOR__AND

and

A text that separates two channel members when using TYPING_INDICATOR__ARE_TYPING.

TYPING_INDICATOR__ARE_TYPING

are typing...

A text that indicates two channel members are typing a message in the message input field.

TYPING_INDICATOR__MULTIPLE_TYPING

Several people are typing...

A text that indicates more than two channel members are typing a message in the message input field.