---
id: message_hooks
sidebar_position: 2
title: Message Hooks
---

The Stream Chat React library provides a variety of useful hooks for use in your custom `Message` component.

## Hooks

### useActionHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useActionHandler.ts) to handler function to handle when an action is sent in a `Channel`.

### useDeleteHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useDeleteHandler.ts) to handle message deletion.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const handleDelete = useDeleteHandler(message);

  if (message.type === 'deleted') {
    return <p>Nothing to see here.</p>;
  }

  return (
    <div>
      {message.text}
      <button onClick={handleDelete}>Delete, please</button>
    </div>
  );
};
```

### useEditHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useEditHandler.ts) to handle message editing. Returns an object with an editing state boolean and handlers for setting and clearing edit mode.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const { editing, setEdit, clearEdit } = useEditHandler();

  if (editing) {
    return (
      <div>
        Editing: {message.text}
        <button onClick={clearEdit}>Cancel</button>
      </div>
    );
  }

  return (
    <div>
      {message.text}
      <button onClick={setEdit}>Edit</button>
    </div>
  );
};
```

### useFlagHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useFlagHandler.ts) to handle flagging messages. Returns an event handler that processes message flagging.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const { addNotification } = useChannelActionContext();
  const handleFlagging = useFlagHandler(message, { notify: addNotification });

  return (
    <div>
      {message.text}
      <button onClick={handleFlagging}>Flag this message</button>
    </div>
  );
};
```

### useMentionsHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useMentionsHandler.ts) to give you access to message mentions and returns handlers for mentions click and hover events.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const { onMentionsClick, onMentionsHover } = useMentionsHandler(message);

  return (
    <div onClick={onMentionsClick} onHover={onMentionsHover}>
      {message.text}
    </div>
  );
};
```

### useMuteHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useMuteHandler.ts) to handle muting users. Returns an event handler that processes user muting.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const { addNotification } = useChannelActionContext();
  const handleMute = useMuteHandler(message, { notify: addNotification });

  return (
    <div>
      {message.text}
      <button onClick={handleMute}>Mute the user that sent this!</button>
    </div>
  );
};
```

### useOpenThreadHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useOpenThreadHandler.ts) to handle the opening of a `thread` in the current `channel`. Returns an event handler to open a thread.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const onThreadClick = useOpenThreadHandler(message);

  return (
    <div>
      {message.text}
      <button onClick={onThreadClick}>Reply</button>
    </div>
  );
};
```

### usePinHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/usePinHandler.ts) to handle message pinning. It provides the permission status of the connected user and a function to toggle pinned status of of a `message`.

```jsx
const MyCustomMessageComponent = () => {
  const { message, pinPermissions } = useMessageContext();
  const { addNotification } = useChannelActionContext();

  const { canPin, handlePin } = usePinHandler(message, pinPermissions, {
    notify: addNotification
  });

  const handleClick = () => {
    if (canPin) handlePin(message);
  }

  return (
    <div className={message.pinned ? 'pinned' : ''} onClick={handleClick}>
      <p>{message.text}</p>
    </div>
  );
};
/>
```

### useReactionHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useReactionHandler.ts) to handle message reactions.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const onReactionClick = useReactionHandler(message);

  return (
    <div>
      {message.text}
      <button onClick={(e) => onReactionClick('nice', e)}>Nice!</button>
      <button onClick={(e) => onReactionClick('not-nice', e)}>I don't like it!</button>
    </div>
  );
};
```

### useReactionsFetcher

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useReactionsFetcher.ts) to handle loading message reactions. Returns an async function that loads and returns message reactions.

```jsx
import { useQuery } from 'react-query';

const MyCustomReactionsList = () => {
  const { message } = useMessageContext();
  const { addNotification } = useChannelActionContext();
  const handleFetchReactions = useReactionsFetcher(message, { notify: addNotification });
  // This example relies on react-query - but you can use you preferred method
  // of fetching data instead
  const { data } = useQuery(['message', message.id, 'reactions'], handleFetchReactions);

  if (!data) {
    return null;
  }

  return (
    <>
      {data.map((reaction) => (
        <span key={reaction.type}>reaction.type</span>
      ))}
    </>
  );
};
```

This function limits the number of loaded reactions to 1200. To customize this behavior, provide [your own loader function](../message-components/reactions.mdx#handlefetchreactions) instead.

### useRetryHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useRetryHandler.ts) to handle the retry of sending a message.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const retrySend = useRetryHandler();

  if (message.status === 'failed') {
    const onRetry = () => retrySend(message);

    return (
      <div>
        Failed to send: {message.text}
        <button onClick={onRetry}>Retry</button>
      </div>
    );
  }

  return <div>{message.text}</div>;
};
```

### useUserHandler

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useUserHandler.ts) that exposes the info for a message's user. Returns event handlers for click and hover events for the user.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const { onUserClick, onUserHover } = useUserHandler(message, {
    onUserClickHandler: (e, user) => console.log(`Message from ${user}`),
    onUserHoverHandler: (e, user) => console.log(`Message from ${user}`),
  });

  return (
    <div onClick={onUserClick} onHover={onUserHover}>
      {message.text}
    </div>
  );
};
```

### useUserRole

A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useUserRole.ts) that exposes the info for a user's role for a certain message. Returns an object with the user's role information.

```jsx
const MyCustomMessageComponent = () => {
  const { message } = useMessageContext();
  const {
    canDelete,
    canEdit,
    canFlag,
    canMute,
    canQuote,
    canReact,
    canReply,
    isAdmin,
    isModerator,
    isMyMessage,
    isOwner,
  } = useUserRole(message);

  if (isMyMessage || isAdmin) {
    ...
  }
};
```
