Input Submit Handler
In this example, we demonstrate how to provide custom logic and override the MessageInput
component's default submit handler function. Our custom handler function will bold any message text.
#
overrideSubmitHandler PropThe MessageInput
component accepts an overrideSubmitHandler
prop, which allows you to add custom logic to the
conclusion of the underlying textarea
element's handleSubmit
function.
note
You do not have to implement your custom submit handler, if the only thing you need is to pass custom message data to the underlying API call. In that case you can use the handleSubmit
function from the MessageInputContext
. The handleSubmit
function allows you to pass custom message data through its second parameter customMessageData
. This applies to sending a new message as well as updating an existing one. In order for this to work, you will have to implement custom message input components and pass them to Channel
props EditMessageInput
or Input
respectively.
The overrideSubmitHandler
function receives two arguments, the message to be sent and the cid
(channel type prepended to channel id)
for the currently active channel. The message object is of the following type:
type MessageToSend = {
attachments?: MessageAttachments;
errorStatusCode?: number;
id?: string;
mentioned_users?: UserResponse[];
parent?: StreamMessage;
parent_id?: string;
status?: string;
text?: string;
};
important
Call the sendMessage
function from the ChannelActionContext
within
your custom function to ensure a message is sent to the active channel.
#
Custom FunctionFor this example, we will take the input text entered by the user and wrap it in two asterisks to render bold markdown. Once we've
added the markdown characters, we call the sendMessage
function with the updated message object.
const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
const boldMessage = {
...message,
text: `**${message.text}**`,
};
sendMessage(boldMessage);
};
#
ImplementationNow that we have our custom function, we can add the overrideSubmitHandler
prop to the MessageInput
component and begin sending
bold text to our MessageList
.
note
Since sendMessage
is drawn from the ChannelActionContext
, we must create an inner component that is a child of Channel
and
call the useChannelActionContext
custom hook.
#
The Codeconst ChannelInner: React.FC = () => {
const { sendMessage } = useChannelActionContext();
const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
const boldMessage = {
...message,
text: `**${message.text}**`,
};
sendMessage(boldMessage);
};
return (
<>
<Window>
<ChannelHeader />
<MessageList />
<MessageInput overrideSubmitHandler={overrideSubmitHandler} />
</Window>
<Thread />
</>
);
};
const App = () => (
<Chat client={chatClient}>
<ChannelList />
<Channel>
<ChannelInner />
</Channel>
</Chat>
);
#
The Result