Typing Indicator for PubNub Chat Components for React
Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.
Subscribes to events generated by MessageInput to display information about users that are currently typing messages.
It can be displayed as a text denoting the user's name, or in a form similar to a message that can be renderer inside the Message List component.
Component
This section shows the preview of a sample Typing Indicator component and its source code.
User ID / UUID
User ID is also referred to as UUID/uuid in some APIs and server responses but holds the value of the userId parameter you set during initialization.
- Preview
- Source Code
<Chat currentChannel="test-channel">
<MessageList>
<TypingIndicator />
</MessageList>
<MessageInput typingIndicator />
</Chat>
Try it out
Test the component as Sue Flores (default user):
- Type in a message in the input field and send it.
Typing Indicator restriction
In the current implementation of PubNub Chat Components for React, you won't see Typing Indicator for your own messages.
- Go to the Message List component to see your message at the bottom of the list.
Parameters
You can configure the component using these parameters:
| Parameter | Type | Default value | Description |
|---|---|---|---|
showAsMessage? | boolean | false | Option to put a typing indicator inside the MessageList component to render indicators as messages. |