---
source_url: https://www.pubnub.com/docs/chat/components/react/ui-components/typing-indicator
title: Typing Indicator for PubNub Chat Components for React
updated_at: 2026-06-29T11:45:51.768Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Typing Indicator for PubNub Chat Components for React

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

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.

:::note 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](https://www.pubnub.com/docs/general/setup/users-and-devices#set-the-user-id).
:::

###### Preview

Loading...

###### Source Code

```tsx
<Chat currentChannel="test-channel">
  <MessageList>
    <TypingIndicator />
  </MessageList>
  <MessageInput typingIndicator />
</Chat>
```

### Try it out

Test the component as Sue Flores (default user):

1. Type in a [message](#component) in the input field and send it.

:::tip Typing Indicator restriction
In the current implementation of PubNub Chat Components for React, you won't see Typing Indicator for your own messages.
:::

1. Go to the [Message List](https://www.pubnub.com/docs/chat/components/react/ui-components/message-list#component) component to see your message at the bottom of the list.

## Parameters

You can configure the component using these parameters:

| Parameter | Default value | Description |
| --- | --- | --- |
| showAsMessage? | boolean | Optional |  | `false` | Option to put a typing indicator inside the MessageList component to render indicators as messages. |