Skip to main content
Replyke stores notifications as structured records with typed metadata — not pre-rendered strings. Your app controls how each notification type is displayed using notification templates. Templates are passed to useAppNotifications via the notificationTemplates prop. Each template can define a title and/or content. Each field accepts either:
  • A string with $variable placeholders that are filled from the notification’s metadata, or
  • A function that receives a typed variables object and returns a string — useful when you need full control, such as translating specific values or applying conditional logic.

​
String template example

import { useAppNotifications } from "@replyke/react-js";

const templates = {
  entityComment: {
    title: "New comment",
    content: "$initiatorName commented on your post",
  },
  commentReply: {
    title: "New reply",
    content: "$initiatorName replied to your comment",
  },
  newFollow: {
    title: "New follower",
    content: "$initiatorName started following you",
  },
  connectionRequest: {
    title: "Connection request",
    content: "$initiatorName wants to connect",
  },
};

function NotificationFeed() {
  const { appNotifications } = useAppNotifications({ notificationTemplates: templates });

  return (
    <ul>
      {appNotifications.map((n) => (
        <li key={n.id}>
          <strong>{n.title}</strong>
          <p>{n.content}</p>
        </li>
      ))}
    </ul>
  );
}

​
Function template example

Function templates are useful when string interpolation isn’t enough — for example, when you need to translate a reaction type value into another language, or apply conditional phrasing. 
const templates = {
  entityReaction: {
    title: ({ initiatorName, reactionType }) => {
      const reactionLabel =
        reactionType === "upvote" ? "me gusta" :
        reactionType === "heart"  ? "corazón"  : reactionType;
      return `${initiatorName} reaccionó con ${reactionLabel} a tu publicación`;
    },
  },
  commentReaction: {
    // Mix string and function in the same template
    title: ({ initiatorName, reactionType }) => {
      const reactionLabel =
        reactionType === "upvote" ? "me gusta" :
        reactionType === "heart"  ? "corazón"  : reactionType;
      return `${initiatorName} reaccionó con ${reactionLabel} a tu comentario`;
    },
    content: "$commentContent",
  },
};
TypeScript will infer the exact variables available for each notification type, so you get autocompletion and type safety when destructuring the parameter.

​
Template keys and available variables

Each key in notificationTemplates corresponds to one notification type. The variables available to both string placeholders and function templates are listed below.
Template keyNotification typeAvailable variables
entityCommententity-commentinitiatorName, initiatorUsername, entityTitle, entityContent, commentContent
commentReplycomment-replyinitiatorName, initiatorUsername, entityTitle, entityContent, commentContent, replyContent
entityMentionentity-mentioninitiatorName, initiatorUsername, entityTitle, entityContent
commentMentioncomment-mentioninitiatorName, initiatorUsername, entityTitle, entityContent, commentContent
entityUpvoteentity-upvoteinitiatorName, initiatorUsername, entityTitle, entityContent
commentUpvotecomment-upvoteinitiatorName, initiatorUsername, entityTitle, entityContent, commentContent
entityReactionentity-reactioninitiatorName, initiatorUsername, entityTitle, entityContent, reactionType
commentReactioncomment-reactioninitiatorName, initiatorUsername, entityTitle, entityContent, commentContent, reactionType
entityReactionMilestoneSpecificentity-reaction-milestone-specificentityTitle, entityContent, reactionType, milestoneCount
entityReactionMilestoneTotalentity-reaction-milestone-totalentityTitle, entityContent, milestoneCount
commentReactionMilestoneSpecificcomment-reaction-milestone-specificentityTitle, entityContent, commentContent, reactionType, milestoneCount
commentReactionMilestoneTotalcomment-reaction-milestone-totalentityTitle, entityContent, commentContent, milestoneCount
newFollownew-followinitiatorName, initiatorUsername
connectionRequestconnection-requestinitiatorName, initiatorUsername
connectionAcceptedconnection-acceptedinitiatorName, initiatorUsername
spaceMembershipApprovedspace-membership-approvedspaceName, spaceShortId, spaceSlug
All template keys are optional. If a template is not provided for a given notification type, Replyke uses a built-in default string template for that type. You only need to supply the keys you want to customize.

​
Accessing raw metadata

For building fully custom UIs, access the raw metadata directly on each notification. Every notification includes:
  • id — the notification’s unique ID
  • type — the notification type string
  • isRead — whether the user has read it
  • action — a hint string for the action to take on tap (e.g., "open-entity", "open-comment", "open-profile")
  • metadata — type-specific fields (entity IDs, initiator info, etc.)
  • createdAt — ISO timestamp