import { Channel } from 'stream-chat-react';
import type { CustomMentionHandler } from 'stream-chat-react';
const handleMentionsClick: CustomMentionHandler = (event, mentionedUsers) => {
const userId = event.target.dataset.userId;
if (!userId) return;
const user = mentionedUsers.find((user) => user.id === userId);
window.alert(`Mentioned user: ${user.name || user.id}`);
};
export const WrappedChannel = ({ children }) => {
return <Channel onMentionsClick={handleMentionsClick}>{children}</Channel>;
};
Mentions Actions
In this example, we will demonstrate how to utilize custom functions that run on hover and click events of a mentioned user in a message. We pass onMentionsHover
and onMentionsClick
functions as props to either the Channel
, MessageList
or VirtualizedMessagelist
components to achieve the desired result.
Both of the event handler functions receive apropriate event object as their first argument and an array of users mentioned within targeted message as their second argument. To target specific user we will need to acess event.target.dataset
and look for userId
.
Mention Click Action
In this example, we’ll show how to properly target clicked user and display their name through window.alert
dialog. Click handler can be helpful for when you need to navigate to user’s profile.
Mention Hover Action
For a simple hover example, we will randomly change the color of the mentioned user text. Through DOM manipulation, we can use the target
field on the event
to change the color.
import { Channel } from 'stream-chat-react';
import type { CustomMentionHandler } from 'stream-chat-react';
const handleMentionsHover: CustomMentionHandler = (event) => {
if (!event.target.dataset.userId) return;
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
event.target.style.color = `#${randomColor}`;
};
export const WrappedChannel = ({ children }) => {
return <Channel onMentionsHover={handleMentionsHover}>{children}</Channel>;
};
Custom Mention Component
If you wish to access certain contexts (like MessageContext
) and have more control over what is being rendered and what other events you’d want to attach to specific mention elements then you’d use a custom Mention
component, see Custom Element Rendering for more information.