Mentions Actions

This example shows how to run custom functions on mention hover and click. Pass onMentionsHover and onMentionsClick to Channel, MessageList, or VirtualizedMessageList.

Both handlers receive the event and an array of mentioned users. To target a specific user, read event.target.dataset and check userId.

Best Practices

Keep mention handlers lightweight to avoid blocking message rendering.
Use dataset userId to reliably target the mentioned user.
Prefer navigation or preview actions over intrusive alerts in production.
Avoid mutating styles directly unless it’s a deliberate UX effect.
Use a custom Mention component for richer interactions.

Mention Click Action

This example targets the clicked user and shows their name via window.alert. Click handlers are useful for navigation to a profile page.

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’ll randomly change the mention text color via the event target.

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 need more control or access to contexts like MessageContext, use a custom Mention component. See Custom Element Rendering.

Reactions Customization

Message Actions