Typing Indicator for PubNub Chat Components for React
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
Loading...
<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. |