Reminder hooks

This hook reads the reminder of one message. It's exported from stream-chat-react.

Reminders and save for later are explained on Reminders and save for later, and the reminder manager, client.reminders, on Reminder manager.

The entry gives the signature, then:

• Returns: what the hook gives back.
• Reads: the store or the context it reads.
• Re-renders: what makes the component render again.
• Needs: where the component must sit, and what the hook does outside that place.

useMessageReminder

Returns the reminder of a message.

useMessageReminder(messageId: string): Reminder | undefined

• Returns: the message's Reminder from client.reminders, or undefined when the message has none. A reminder without a time is a "save for later" bookmark.
• Reads: client.reminders.state, field reminders: the entry for messageId.
• Re-renders: when the message gets a reminder or loses it. Not when the reminder itself changes, such as its time or its countdown: those are in reminder.state, which you read with useStateStore.
• Needs: Chat. Throws outside it.

MessageUI calls it to decide whether to render ReminderNotification. A badge of your own reads the reminder, then its state:

import type { ReminderState } from "stream-chat";
import {
  useMessageContext,
  useMessageReminder,
  useStateStore,
} from "stream-chat-react";

const reminderSelector = ({ remind_at, timeLeftMs }: ReminderState) => ({
  remindAt: remind_at,
  timeLeftMs,
});

export const ReminderBadge = () => {
  const { message } = useMessageContext();
  const reminder = useMessageReminder(message.id);
  const { remindAt, timeLeftMs } =
    useStateStore(reminder?.state, reminderSelector) ?? {};

  if (!reminder) return null;
  if (remindAt == null) return <span>Saved for later</span>;
  if (timeLeftMs == null || timeLeftMs <= 0) return <span>Reminder due</span>;

  return <span>Due in {Math.ceil(timeLeftMs / 60000)} min</span>;
};

timeLeftMs is refreshed by the reminder's timer, more often as the time gets closer: Reminder state and timers explains the schedule.

Reminder stores without a hook

Read these stores with useStateStore and your own selector:

Your own reminder list builds a "Saved for later" screen on the paginator's store.