Message Input for PubNub Chat Components for React

USED BY THE OLD IA, PLEASE DISREGARD

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

1<Chat currentChannel="test-channel">
2<MessageInput />
3</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:

placeholder?#

type: Type: string

Option to set a placeholder message to display in the text window.

Default value

"Send message"

draftMessage?#

type: Type: string

Option to set a draft message to display in the text window.

Default value

n/a

senderInfo?#

type: Type: boolean

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.

Default value

false

typingIndicator?#

type: Type: boolean

Option to enable/disable firing the typing events when a user is typing a message.

Default value

false

fileUpload?#

type: Type: "image" | "all"

Option to enable/disable the internal file upload capability. It lets you send both text and file in one message.

Default value

n/a

filePreviewRenderer?#

type: Type: (file: File | UriFileInput) => JSX.Element | null

Callback to render the preview of the attached file.

Default value

n/a

disabled?#

type: Type: boolean

Option to disable the input from composing and sending messages.

Default value

false

hideSendButton?#

type: Type: boolean

Option to hide the Send button.

Default value

false

sendButton?#

type: Type: JSX.Element | string

Custom UI component to override default display for the Send button.

Default value

<AirplaneIcon />

emojiPicker?#

type: Type: ReactElement<EmojiPickerElementProps>

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.

Default value

n/a

actionsAfterInput?#

type: Type: boolean

Option to move action buttons (eg. file upload icon) to the right of the text input.

Default value

false

onChange?#

type: Type: (event: ChangeEvent<HTMLTextAreaElement>) => void

Callback to handle an event when the input value changes.

Default value

n/a

onKeyPress?#

type: Type: (event: KeyboardEvent<HTMLTextAreaElement>) => void

Callback to handle an event when a key is pressed in the input area.

Default value

n/a

onBeforeSend?#

type: Type: (value: MessagePayload) => MessagePayload

Callback to modify message content before sending it. This only works for text messages, not files.

Default value

n/a

onSend?#

type: Type: (value: MessagePayload | File | UriFileInput) => void

Callback for extra actions after sending a message.

Default value

n/a

extraActionsRenderer?#

type: Type: () => JSX.Element

Option to provide an extra actions renderer to add custom action buttons to the input.

Default value

n/a

Selected textarea attributes#

type: Type: various

Chat Components for React let you configure all the default React 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} />.

Default value

n/a

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 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 of the Chat Provider component and pass it to a custom callback function.

1import "./styles.css";
2import PubNub from "pubnub";
3import { PubNubProvider } from "pubnub-react";
4import { Chat, MessageList, MessageInput } from "@pubnub/react-chat-components";
5

6const pubnub = new PubNub({
7publishKey: "demo",
8subscribeKey: "demo",
9userId: "test-user"
10});
11

12export default function App() {
13function handleError(e) {
14    console.log("Error handler: ", e);
15}
16

17return (
18    <PubNubProvider client={pubnub}>
19    <Chat currentChannel="test" onError={handleError}>
20        <MessageList />
21        <MessageInput />
22    </Chat>
23    </PubNubProvider>
24);
25}

show all 25 lines