---
id: mentions_actions
title: 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`](../../../components/core-components/channel.mdx), [`MessageList`](../../../components/core-components/message-list.mdx) or [`VirtualizedMessagelist`](../../../components/core-components/virtualized-list.mdx) 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`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.

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

```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 wish to access certain contexts (like [`MessageContext`](../../../components/contexts/message-context.mdx)) 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`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/renderText/componentRenderers/Mention.tsx) component, see [_Custom Element Rendering_](../../../components/message-components/render-text.mdx#custom-element-rendering) for more information.
