# @knocklabs/react-notification-feed

> A set of React components to render feeds powered by Knock

Latest version **0.8.15** (published 2024-01-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install @knocklabs/react-notification-feed
pnpm add @knocklabs/react-notification-feed
yarn add @knocklabs/react-notification-feed
bun add @knocklabs/react-notification-feed
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.15 |
| Published | 2024-01-16 |
| First published | 2021-05-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 336.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Author | @knocklabs |
| Maintainers | cjbell |

## Links

- npm: https://www.npmjs.com/package/@knocklabs/react-notification-feed
- Repository: https://github.com/knocklabs/react-notification-feed
- Issues: https://github.com/knocklabs/react-notification-feed/issues
- npm.io page: https://npm.io/package/@knocklabs/react-notification-feed

## Dependencies (7)

- [zustand](https://npm.io/package/zustand.md) ^3.5.10
- [date-fns](https://npm.io/package/date-fns.md) ^2.24.0
- [react-popper](https://npm.io/package/react-popper.md) ^2.2.5
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.9.2
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [@knocklabs/client](https://npm.io/package/@knocklabs/client.md) ^0.8.14
- [react-popper-tooltip](https://npm.io/package/react-popper-tooltip.md) ^4.3.0

## Recent versions

- 0.8.15 (latest) — 2024-01-16
- 0.8.14 — 2024-01-03
- 0.8.13 — 2023-12-13
- 0.8.12 — 2023-11-21
- 0.8.11 — 2023-10-19
- 0.8.10 — 2023-10-16
- 0.8.9 — 2023-10-13
- 0.8.8 — 2023-08-15
- 0.8.7 — 2023-08-07
- 0.8.6 — 2023-05-22
- 0.8.5 — 2023-04-18
- 0.8.4 — 2023-02-27
- 0.8.3 — 2023-02-20
- 0.8.2 — 2022-12-22
- 0.8.1 — 2022-10-06
- … 49 more at https://npm.io/package/@knocklabs/react-notification-feed/versions

## README

# React notification feed

A set of components for integrating [Knock](https://knock.app) in-app notifications into a React application.

[See a live demo](https://knock-in-app-notifications-react.vercel.app/)

![In-app feed component example](NotificationFeed2.png)

**Note: these components are currently designed to be used in conjunction with the Knock in-app feed
channel, and via React for web only.**

[Full documentation](https://docs.knock.app/in-app-ui/react/overview)

## Installation

Via NPM:

```
npm install @knocklabs/react-notification-feed
```

Via Yarn:

```
yarn add @knocklabs/react-notification-feed
```

## Configuration

To configure the feed you will need:

1. A public API key (found in the Knock dashboard)
2. A feed channel ID (found in the Knock dashboard)
3. A user ID, and optionally an auth token for production environments

## Usage

You can integrate the feed into your app as follows:

```jsx
import {
  KnockFeedProvider,
  NotificationIconButton,
  NotificationFeedPopover,
} from "@knocklabs/react-notification-feed";

// Required CSS import, unless you're overriding the styling
import "@knocklabs/react-notification-feed/dist/index.css";

const YourAppLayout = () => {
  const [isVisible, setIsVisible] = useState(false);
  const notifButtonRef = useRef(null);

  return (
    <KnockFeedProvider
      apiKey={process.env.KNOCK_PUBLIC_API_KEY}
      feedId={process.env.KNOCK_FEED_ID}
      userId={currentUser.id}
    >
      <>
        <NotificationIconButton
          ref={notifButtonRef}
          onClick={(e) => setIsVisible(!isVisible)}
        />
        <NotificationFeedPopover
          buttonRef={notifButtonRef}
          isVisible={isVisible}
          onClose={() => setIsVisible(false)}
        />
      </>
    </KnockFeedProvider>
  );
};
```

## Headless usage

Alternatively, if you don't want to use our components you can render the feed in a headless mode using our hooks:

```jsx
import {
  useAuthenticatedKnockClient,
  useNotifications,
} from "@knocklabs/react-notification-feed";
import create from "zustand";

const YourAppLayout = () => {
  const knockClient = useAuthenticatedKnockClient(
    process.env.KNOCK_PUBLIC_API_KEY,
    currentUser.id
  );

  const notificationFeed = useNotifications(
    knockClient,
    process.env.KNOCK_FEED_ID
  );

  const useNotificationStore = create(notificationFeed.store);
  const { metadata } = useNotificationStore();

  useEffect(() => {
    notificationFeed.fetch();
  }, [notificationFeed]);

  return <span>Total unread: {metadata.unread_count}</span>;
};
```

## Related links

- [Signup for Knock](https://knock.app)
- [Knock documentation](https://docs.knock.app)
- [Knock dashboard](https://dashboard.knock.app)

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