Skip to main content

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 to handler function to handle when an action is sent in a Channel.

useBreakpoint#

A custom hook that returns an object with the device type (ex: 'mobile' | 'tablet' | 'full') and width, for responsive development.

useDeleteHandler#

A custom hook to handle message deletion.

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 to handle message editing. Returns an object with an editing state boolean and handlers for setting and clearing edit mode.

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 to handle flagging messages. Returns an event handler that processes message flagging.

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 to give you access to message mentions and returns handlers for mentions click and hover events.

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

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

useMobileHandler#

A custom hook to handle click events for mobile devices, returns an event handler.

useMuteHandler#

A custom hook to handle muting users. Returns an event handler that processes user muting.

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 to handle the opening of a thread in the current channel. Returns an event handler to open a thread.

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

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

usePinHandler#

A custom hook to handle message pinning. It provides the permission status of the connected user and a function to toggle pinned status of of a message.

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 to handle message reactions.

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

useRetryHandler#

A custom hook to handle the retry of sending a message.

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 that exposes the info for a message's user. Returns event handlers for click and hover events for the user.

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 that exposes the info for a user's role for a certain message. Returns an object with the user's role information.

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

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

Did you find this page helpful?