React Native In-App Hooks

Fyno In-app React hooks SDK lets you manage the in-app notification center in your React application with your own 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

To get started with Fyno’s In-App React Hooks SDK, you’ll need to install it using NPM

$
npm install @fyno/react-hooks

Usage

Before you dive into using the In-App Notification Center, there are some prerequisites you need to fulfill. You must ensure you have the necessary information and generate an HMAC signature.

Prerequisites

Before you start, make sure you have the following information ready

• Workspace ID (WSID): You can find your workspace ID on your Fyno App > API Keys page.
• Integration Token: Obtain the integration token from the Fyno App > Integrations page.
• User ID: This should be a unique identifier for the currently logged-in user. This user ID is crucial for Fyno to send specific notifications to the right users.

HMAC Signature Generation

The HMAC signature is essential for ensuring the security and integrity of your notifications. Here are examples of how to generate the HMAC signature in various programming languages

1
import crypto from "crypto"; //module
2
//or
3
// const crypto = require('crypto') //commonjs
4
const signature = crypto
5
  .createHmac("sha256", "WSID" + "INTEGRATION_TOKEN")
6
  .update("USER_ID")
7
  .digest("hex");

SDK Initialisation

To use the SDK in your React native application, you can import useInappManager hook. The useInappManager hook provides all the data and handlers needed to work with in-app notifications. Here’s a quick example of how the configuration looks like:

1
import useInappManager from '@fyno/react-hooks';
2
3
// Define the necessary props
4
const fynoProps = {
5
  distinctId: 'your-distinct-id', // Unique user ID
6
  workspaceId: 'your-workspace-id', // Your workspace identifier
7
  integrationId: 'your-integration-id', // Integration identifier
8
  signature: 'your-signature', // HMAC signature for authentication
9
};
10
11
// Call the hook with the props
12
const { data, handlers } = useInappManager(fynoProps);
13
14
// Access data properties
15
const { unreadCount, list, unreadList, count, errMsg } = data;
16
17
// Access handler functions
18
const { handleClick, handleIncomingMessage, handleMarkAsRead, handleDelete, loadMoreNotifications, deleteAllMessages, handleMarkAllAsRead } = handlers;

That’s it! You’re ready to build your notification center with data and handlers provided by Fyno In-App Hooks in your React application.