MessageInputContext

The MessageInputContext is established within the MessageInput component. The value is the combination of the MessageInputProps, MessageInputState (returned by the useMessageInputState hook), and cooldownTimerState (returned by the useCooldownTimer hook). It provides data to the Input UI component and its children. Use the values stored within this context to build a custom Input UI component. You can access the context values by calling the useMessageInputContext custom hook.

Basic Usage

Pull values from context with our custom hook:

const { autocompleteTriggers, handleSubmit } = useMessageInputContext();

Values

additionalTextareaProps

Additional props to be consumed by the underlying TextareaComposer component.

type additionalTextareaProps = Omit<
  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
  "defaultValue" | "style" | "disabled" | "value"
>;

clearEditingState

Function to clear the editing state while editing a message.

closeCommandsList

Function to manually close the list of supported slash commands.

closeMentionsList

Function to manually close the list of potential users to mention.

cooldownInterval

If slow mode is enabled, the required wait time between messages for each user.

cooldownRemaining

If slow mode is enabled, the amount of time remaining before the connected user can send another message.

disabled

If true, disables the text input.

dismissLinkPreview

Function called when a single link preview is dismissed.

emojiSearchIndex

Custom class constructor to override default NimbleEmojiIndex from ‘emoji-mart’.

focus

If true, focuses the text input on component mount.

handleSubmit

Function that runs onSubmit to the underlying textarea component.

hideSendButton

Allows to hide MessageInput’s send button. Used by MessageSimple to hide the send button in EditMessageForm. Received from MessageInputProps.

isThreadInput

Signals that the MessageInput is rendered in a message thread (Thread component).

shouldSubmit

Currently, Enter is the default submission key and Shift+Enter is the default combination for the new line. If specified, this function overrides the default behavior specified previously.

maxRows

Max number of rows the underlying textarea component is allowed to grow.

minRows

Min number of rows the underlying textarea will start with.

onPaste

Function that runs onPaste to the underlying textarea component.

overrideSubmitHandler

Function to override the default submit handler.

type overrideSubmitHandler = (params: {
  cid: string; // target channel CID
  localMessage: LocalMessage; // object representing the local message data used for UI update
  message: Message; // object representing the payload sent to the server for message creation / update
  sendOptions: SendMessageOptions;
}) => Promise<void> | void;

import { MessageInput } from "stream-chat-react";
import type { MessageInputProps } from "stream-chat-react";

const CustomMessageInput = (props: MessageInputProps) => {
  const submitHandler: MessageInputProps["overrideSubmitHandler"] = useCallback(
    async (params: {
      cid: string;
      localMessage: LocalMessage;
      message: Message;
      sendOptions: SendMessageOptions;
    }) => {
      // custom logic goes here

      await sendMessage({ localMessage, message, options: sendOptions });
    },
    [sendMessage],
  );

  return (
    <StreamMessageInput {...props} overrideSubmitHandler={submitHandler} />
  );
};

parent

When replying in a thread, the parent message object.

setCooldownRemaining

React state hook function that sets the cooldownRemaining value.

textareaRef

React mutable ref placed on the underlying textarea component.