# @fyno/react-hooks

> [![NPM](https://img.shields.io/npm/v/@fyno/react-hooks.svg)](https://www.npmjs.com/package/@fyno/react-hooks) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Latest version **2.0.2-react** (published 2025-06-23) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @fyno/react-hooks
pnpm add @fyno/react-hooks
yarn add @fyno/react-hooks
bun add @fyno/react-hooks
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2-react |
| Published | 2025-06-23 |
| First published | 2025-06-18 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 2 |
| Unpacked size | 46.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | KSaiVinod |
| Maintainers | ashwin-agarwal, ashishag86, saivinod, pranavbadami |
| Keywords | notifications, notification infrastructure, inapp, notification center, push, toast, react-native inapp, fyno inapp hook |

## Links

- npm: https://www.npmjs.com/package/@fyno/react-hooks
- Repository: https://github.com/fynoio/react-hooks
- npm.io page: https://npm.io/package/@fyno/react-hooks

## Dependencies (2)

- [socket.io-client](https://npm.io/package/socket.io-client.md) ^4.7.2
- [@rollup/plugin-terser](https://npm.io/package/@rollup/plugin-terser.md) ^0.4.4

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 2.0.2-react (latest) — 2025-06-23
- 1.0.6 — 2025-06-18
- 2.0.0 — 2025-06-18
- 2.0.1-react — 2025-06-18
- 2.0.0-react — 2025-06-18

## README

# Fyno React Hooks

[![NPM](https://img.shields.io/npm/v/@fyno/react-hooks.svg)](https://www.npmjs.com/package/@fyno/react-hooks) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![Fyno: Fire your notifications](https://fynodev.s3.ap-south-1.amazonaws.com/others/Fyno_Banner.jpeg)

## 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**.

Note: if you are using `@fyno/reach-hooks` package in ReactNative or Expo you need to install `react-native-device-info` plugin as well

```bash
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](https://docs.fyno.io/recipes/hmac-generation-for-in-app).

## 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.

---
_Source: https://npm.io/package/@fyno/react-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._