1.0.2 • Published 2 months ago

@fyno/react-hooks v1.0.2

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 months ago

@fyno/react-hooks

useInappManager

The useInappManager hook is a powerful React custom hook designed to facilitate the integration and management of in-app notifications within your application. This documentation aims to guide through the installation, usage of this hook.

Installation

npm install @fyno/react-hooks

Usage

import useInappManager from '@fyno/react-hooks';

// Provide necessary props
const fynoProps = {
  distinctId: 'your-distinct-id',
  workspaceId: 'your-workspace-id',
  integrationId: 'your-integration-id',
  signature: 'your-signature',
};

const { data, handlers } = useInappManager(fynoProps);

// Access data properties
const { unreadCount, list, unreadList, count, errMsg } = data;

// Access handler functions
const {
  handleClick,
  handleIncomingMessage,
  handleMarkAsRead,
  handleDelete,
  loadMoreNotifications,
  deleteAllMessages,
  handleMarkAllAsRead,
} = handlers;

Props

  • distinctId (string): Unique identifier for the user.
  • workspaceId (string): Identifier for the workspace.
  • integrationId (string): Identifier for the integration.
  • signature (string): Signature for authentication.

Data Properties

  • unreadCount (number): Number of unread notifications.
  • list (Array): List of all notifications.
  • unreadList (Array): List of unread notifications.
  • count (number): Total number of notifications.
  • errMsg (string): Error message, if any.

Handler Functions

  • handleIncomingMessage(message: Notification): Handle incoming messages.
  • handleMarkAsRead(msg: Notification): Mark a message as read.
  • handleDelete(msg: Notification): Delete a message.
  • loadMoreNotifications page: number, type: ("All" or "Unread"): Load more notifications.
  • deleteAllMessages(): Delete all messages.
  • handleMarkAllAsRead(): Mark all messages as read.

Example

// Your React component
const YourComponent = () => {
  const { data, handlers } = useInappManager(fynoProps);

  // Use data and handlers as needed
  // ...

  return (
    // Your component JSX
  );
};

NOTE: Ensure to provide valid and secure values for the distinctId, workspaceId, integrationId, and signature props. For signature generation you can refer this.