---
source_url: https://www.pubnub.com/docs/chat/components/react/ui-components/message-input
title: Message Input for PubNub Chat Components for React
updated_at: 2026-05-19T12:09:58.013Z
---

> 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


# Message Input 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).
:::

Allows users to compose messages using text and emojis and automatically publish them on PubNub channels upon sending.

## Component

This section shows the preview of a sample Message Input component and its source code.

### Preview

### Source Code

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

### Try it out

Test the component as Sue Flores (default user):

1. Type in a message in the input field and send it.
2. 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 | Default value | Description |
| --- | --- | --- |
| placeholder? | string | Optional |  | `"Send message"` | Option to set a placeholder message to display in the text window. |
| draftMessage? | string | Optional |  | n/a | Option to set a draft message to display in the text window. |
| senderInfo? | boolean | Optional |  | `false` | Option to attach sender data directly to each message. Enable it for high-throughput environments. This is an alternative to providing a full list of users directly into the Chat provider. |
| typingIndicator? | boolean | Optional |  | `false` | Option to enable/disable firing the typing events when a user is typing a message. |
| fileUpload? | "image" | Optional |  | n/a | Option to enable/disable the internal file upload capability. It lets you send both text and file in one message. |
| filePreviewRenderer? | (file: | Optional |  | n/a | Callback to render the preview of the attached file. |
| disabled? | boolean | Optional |  | `false` | Option to disable the input from composing and sending messages. |
| hideSendButton? | boolean | Optional |  | `false` | Option to hide the Send button. |
| sendButton? | JSX.Element | Optional |  | `<AirplaneIcon />` | Custom UI component to override default display for the Send button. |
| emojiPicker? | ReactElement<EmojiPickerElementProps> | Optional |  | n/a | Option to pass in an emoji picker if you want it to be rendered in the input. For more details, refer to the Emoji Pickers section in the docs. |
| actionsAfterInput? | boolean | Optional |  | `false` | Option to move action buttons (eg. file upload icon) to the right of the text input. |
| onChange? | (event: | Optional |  | n/a | Callback to handle an event when the input value changes. |
| onKeyPress? | (event: | Optional |  | n/a | Callback to handle an event when a key is pressed in the input area. |
| onBeforeSend? | (value: | Optional |  | n/a | Callback to modify message content before sending it. This only works for text messages, not files. |
| onSend? | (value: | Optional |  | n/a | Callback for extra actions after sending a message. |
| extraActionsRenderer? | () | Optional |  | n/a | Option to provide an extra actions renderer to add custom action buttons to the input. |
| Selected textarea attributes | various | Optional |  | n/a | Chat Components for React let you configure all the default React [textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) except for `className`, `data-testid`, `disabled`, `onChange`, `onKeyPress`, `placeholder`, `ref`, `rows`, and `value`. For example, you can set a limit to the maximum number of characters that can be entered in the input field using the `maxLength` parameter, like `<MessageInput maxLength={120} />`. |

## Offline message behavior

When you send a message and the network connection is lost, the message will still be visible in the message input upon tapping the `Send` button, and other chat users won’t see it on the message list. The message won't reach the server (the [publish method](https://www.pubnub.com/docs/sdks/javascript/api-reference/publish-and-subscribe#methods) from the JavaScript SDK will fail), returning the `PubNub call failed, check status for details` error.

You can handle these incoming errors using the [onError property](https://www.pubnub.com/docs/chat/components/react/error-handling) of the Chat Provider component and pass it to a custom callback function.

```js
import "./styles.css";
import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import { Chat, MessageList, MessageInput } from "@pubnub/react-chat-components";

const pubnub = new PubNub({
publishKey: "demo",
subscribeKey: "demo",
userId: "test-user"
});

export default function App() {
function handleError(e) {
    console.log("Error handler: ", e);
}

return (
    <PubNubProvider client={pubnub}>
    <Chat currentChannel="test" onError={handleError}>
        <MessageList />
        <MessageInput />
    </Chat>
    </PubNubProvider>
);
}
```