# Get Unread Indie Notifications Count

This guide covers how to use the 'getUnreadIndieNotificationInboxCount' function to get the total number of unread notifications a user has in their Indie Notification Inbox.

This video walks through the setup guide below:

[YouTube video player](https://www.youtube.com/embed/8_4lmVhNHRU?rel=0)

## Unread Count Preview

Here's how getting and using the unread count works:

- **Get Number of Unread Indie Notifications Sent:** Use the native-notify **getUnreadIndieNotificationInboxCount** function to get the total number of Indie Push Notifications sent that have not yet been read by the individual user.
- **Use**: Use the unread notification count information to know when to add a red dot over your Indie Notification Inbox icon to indicate the user has unread push notifications in their Indie Notification Inbox.

## Prerequisites

1. **Create a free Native Notify account**

   Create a free [NativeNotify.com](https://dashboard.nativenotify.com/sign-up-one)
   account to get your Native Notify App ID and App Token.

> **A Pro plan feature:**
>
> The notification inbox is included in the **Free**, **Pro** and **Team** plans. On **Premium**, every inbox endpoint answers `201` with an explanation instead of notifications (*"Your current Native Notify membership cannot access notification inbox features…"*), so the SDK shows an empty inbox and an unread count of 0. Notifications you send keep being recorded, so they appear once the account upgrades. See [what each plan includes](/docs/billing#what-each-plan-includes).

## Setup and Use

1. **Import getUnreadIndieNotificationInboxCount**

   In your Footer or Header component (wherever your Unread Notifications Icon is
   located), include these imports:

   ```bash
   import React, { useState, useEffect } from 'react';
   import {getUnreadIndieNotificationInboxCount} from 'native-notify';
   ```

2. **Check for Hook function**

   Make sure you are using a Hook function as your Footer or Header component (wherever your Unread Notifications Icon is located). Here is an example:

   ```bash
   export default function Footer() {
       ...
   }
   ```

   This link explains Hooks in detail: [https://react.dev/reference/react/hooks](https://react.dev/reference/react/hooks)

3. **Create a data Hook**

   Inside of your Footer or Header component (wherever your Unread Notifications Icon is located), create a useState to store your Unread Notifications Count like this:

   ```bash
   const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);
   ```

4. **Get unread count**

   Paste this 'useEffect' function into your Footer or Header component (wherever your Unread Notifications Icon is located):

   ```bash
   const fetchUnreadCount = async () => {
       try {
           const unreadCount = await getUnreadIndieNotificationInboxCount(
             "unique-user-id",
             app-id-number,
             "app-token-string"
           );
           console.log("unreadCount: ", unreadCount);
           setUnreadNotificationCount(unreadCount);
       } catch (error) {
           console.error("Error fetching unread notification count: ", error);
       }
   };

   useEffect(() => {
     fetchUnreadCount();
   }, []);
   ```

   **Notes:**

   - Replace "unique-user-id" with the unique user ID you registered with Native Notify.
   - This link explains how 'useEffect' works in detail: [https://react.dev/reference/react/useEffect](https://react.dev/reference/react/useEffect)

5. **Create Unread Notifications Bubble**

   Use this unreadNotificationCount to create an unread notification bubble over
   your Unread Notifications Icon whenever the number of unreadNotificationCount
   is above zero (0).

## Complete example

```bash
import React, { useState, useEffect } from 'react';
import { getUnreadIndieNotificationInboxCount } from 'native-notify';

export default function Header() {
    const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);

    const fetchUnreadCount = async () => {
        try {
            const unreadCount = await getUnreadIndieNotificationInboxCount(
              "unique-user-id",
              app-id-number,
              "app-token-string"
            );
            console.log("unreadCount: ", unreadCount);
            setUnreadNotificationCount(unreadCount);
        } catch (error) {
            console.error("Error fetching unread notification count: ", error);
        }
    };

    useEffect(() => {
      fetchUnreadCount();
    }, []);

    return (
      ...
    )
}
```