useAppNotifications Hook

Replyke’s app notifications feature uses a Redux-powered hook that provides a simple interface for managing user notifications. No provider wrapper is needed - simply use the hook directly in your components.

Basic Usage

import { useAppNotifications } from '@replyke/core';
 
function NotificationCenter() {
  const {
    appNotifications,
    unreadAppNotificationsCount,
    loading,
    hasMore,
    loadMore,
    markNotificationAsRead,
    markAllNotificationsAsRead,
    resetAppNotifications
  } = useAppNotifications();
 
  return (
    <div>
      <h2>Notifications ({unreadAppNotificationsCount} unread)</h2>
      {appNotifications.map(notification => (
        <div key={notification.id} onClick={() => markNotificationAsRead(notification.id)}>
          {notification.title}
        </div>
      ))}
      {hasMore && <button onClick={loadMore}>Load More</button>}
    </div>
  );
}

Hook Configuration

The useAppNotifications hook accepts optional configuration props:

interface UseAppNotificationsProps {
  limit?: number;
  notificationTemplates?: Partial<NotificationTemplates>;
}

Configuration Options:

1. limit: Specifies the number of notifications to fetch per batch. This strikes a balance between efficiency and the number of API calls. The default value is 10, which is suitable for most use cases.

2. notificationTemplates: An object containing templates to customize notification messages. If not provided, default templates are used. This feature is explored in detail in the notification templates section.

Example with Custom Configuration:

const notificationConfig = {
  limit: 20,
  notificationTemplates: {
    entityComment: {
      title: "$initiatorName left a comment on your post \"$entityTitle\"",
      content: "$commentContent"
    },
    newFollow: {
      title: "$initiatorName started following you!",
      content: "Check out their profile: @$initiatorUsername"
    }
  }
};
 
function NotificationCenter() {
  const notifications = useAppNotifications(notificationConfig);
  // ... rest of component
}

Hook Interface

The useAppNotifications hook provides the following data and functions:

interface UseAppNotificationsValues {
  appNotifications: UnifiedAppNotification[];
  unreadAppNotificationsCount: number;
  loading: boolean;
  hasMore: boolean;
  loadMore: () => void;
  markNotificationAsRead: (notificationId: string) => Promise<void>;
  markAllNotificationsAsRead: () => Promise<void>;
  resetAppNotifications: () => Promise<void>;
}

Available Data:

1. appNotifications: An array of all fetched notifications, ordered by creation time.
2. unreadAppNotificationsCount: The number of unread notifications.
3. loading: A flag indicating if more notifications are currently being fetched.
4. hasMore: A flag indicating if there are more notifications to fetch.

Available Functions:

1. loadMore: Fetches the next batch of notifications.
2. markNotificationAsRead: Expects a notification ID, and marks that notification as “read”.
3. markAllNotificationsAsRead: Marks all notifications as “read”.
4. resetAppNotifications: Resets and refetches notifications, starting with the first batch.

Ready-to-Use React Component

Replyke also provides a complete, ready-to-use React component that developers can implement in their apps for free. You can see it in action on Replyke landing page. This component works with Replyke out of the box and includes all the UI and functionality needed for a complete notifications experience.

View the React Notifications Component

The component includes:

• Pre-styled notification list with loading states
• Mark as read functionality
• Load more pagination
• Unread count badge
• Customizable styling options

Creating an Engaging Notifications Experience

With the data and functions provided by the useAppNotifications hook, developers can create a dynamic and engaging notifications experience for users. The Redux-powered architecture ensures optimal performance and state management across your application. Subsequent chapters will delve deeper into customizing notification templates and advanced integration techniques.