Fyno React Hooks

Overview

The @fyno/react-hooks SDK let's you manage in-app notifications in your React app using custom UI. The core of this SDK is the useInappManager hook, which helps you retrieve notification data and manage actions like marking messages as read or deleting them.

Installation

Make sure you're using Node.js v8 or higher and npm v5 or higher.

npm install @fyno/react-hooks

Getting Started with useInappManager

The useInappManager hook provides all the data and handlers needed to work with in-app notifications.

Prop Descriptions

1. distinctId (string) - Unique identifier for the user.
2. workspaceId (string) - ID for your workspace in Fyno.
3. integrationId (string) - ID for your integration.
4. signature (string) - Secure HMAC signature used to authenticate requests.

Available Data

The data object provides you with everything you need to display and manage notifications:

• unreadCount (number): The number of unread notifications.
• list (Array): The full list of notifications.
• unreadList (Array): List of only the unread notifications.
• count (number): Total number of notifications.
• errMsg (string): Error message, if there’s an issue fetching data.

Available Handlers

The handlers object includes a set of functions to help you manage notifications effectively:

• handleIncomingMessage: Processes an incoming message.
• handleMarkAsRead: Marks a specific notification as read.
• handleDelete: Deletes a specific notification.
• loadMoreNotifications: Loads more notifications (e.g., page-by-page).
• deleteAllMessages: Deletes all notifications.
• handleMarkAllAsRead: Marks all notifications as read.

Note: Ensure you provide secure and valid values for distinctId, workspaceId, integrationId, and signature. For help generating a signature, check this guide.

Example Project

For a complete example of how to implement the useInappManager hook with a custom UI, refer to the example project included in this repository.