> ## Documentation Index
> Fetch the complete documentation index at: https://replyke-feat-push-rich-payload-fields.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Hook

## 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

```typescript theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
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](https://replyke.com). 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](https://github.com/replyke/v6-webcontainer-js/tree/main/src/components/notification-control)

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.