# Mentions Actions

This example shows how to run custom functions on mention hover and click. Pass `onMentionsHover` and `onMentionsClick` to [`Channel`](/chat/docs/sdk/react/components/core-components/channel/), [`MessageList`](/chat/docs/sdk/react/components/core-components/message_list/), or [`VirtualizedMessageList`](/chat/docs/sdk/react/components/core-components/virtualized_list/).

Both handlers receive the event and an array of mentioned users. To target a specific user, read [`event.target.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.

```tsx
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.

```tsx
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`](/chat/docs/sdk/react/components/contexts/message_context/), use a custom [`Mention`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/renderText/componentRenderers/Mention.tsx) component. See [_Custom Element Rendering_](/chat/docs/sdk/react/components/message-components/render-text#custom-element-rendering/).


---

This page was last updated at 2026-03-13T13:15:41.707Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/guides/theming/actions/mentions_actions/](https://getstream.io/chat/docs/sdk/react/guides/theming/actions/mentions_actions/).