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.

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>;
};

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.