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?