Advanced Functionality

For more advanced use cases, you can go beyond the notification panel and bell icon by implementing functionalities like managing unread counts or updating notification states globally in your app. This guide will walk you through setting up EngagespotProvider and EngagespotCore to achieve this.

1. Wrap Your App with EngagespotProvider

The EngagespotProvider acts as a React context provider, handling all Engagespot data and allowing access to extended features throughout your app.

import { EngagespotProvider } from '@engagespot/react-component';

function App() {
  return (
    <EngagespotProvider userId="uniqueUserId" apiKey="yourApiKey">
      <YourMainComponent />
    </EngagespotProvider>
  );
}

2. Using EngagespotCore for Notification Panel and Bell Icon

The EngagespotCore component provides the notification bell icon and panel. You can place this component anywhere in your app, and it will render the notification UI with a bell icon that opens the notification panel on click.

import { EngagespotCore } from '@engagespot/react-component';

function NotificationButton() {
  return <EngagespotCore />;
}

3. Leveraging extended functionalities

With the EngagespotProvider in place, you gain access to the full suite of Engagespot functionalities. For example, you can retrieve the unread count, change notification states, or perform other actions programmatically from anywhere within your app.

All the hooks provided by @engagespot/react-hooks can be used by @engagespot/react-component when we wrap our app with the EngagespotProvider. To see the full list of methods, explore our react hooks reference.

import { useUnreadCount, useMarkAsRead } from '@engagespot/react-component';

function CustomNotificationDisplay() {
  const unreadCount = useUnreadCount();
  const markAsRead = useMarkAsRead();

  return (
    <div>
      <p>Unread Notifications: {unreadCount}</p>
      <button onClick={() => markAsRead()}>Mark All as Read</button>
    </div>
  );
}

Additional Resources

To explore more functions and hooks, check out the Engagespot React Hooks Documentation to learn about available actions like marking notifications as read, managing user preferences, and more.

---