Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@knocklabs/react-notification-feed

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@knocklabs/react-notification-feed

A set of React components to render feeds powered by Knock

  • 0.8.15
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10K
decreased by-14.36%
Maintainers
1
Weekly downloads
 
Created
Source

React notification feed

A set of components for integrating Knock in-app notifications into a React application.

See a live demo

In-app feed component example

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

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:

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:

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>;
};

FAQs

Package last updated on 16 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc