@nordva/react

The Nordva Launch notification bell as a React component.

npm install @nordva/react

import { NotificationBell } from "@nordva/react";

export function Header({ user }) {
  return (
    <header>
      <a href="/">Acme</a>
      <NotificationBell
        publishableKey="nv_pub_live_YOUR_KEY"
        userId={user.id}
        userHash={user.nordvaHash}
        categories={{ billing: "Billing", updates: "Product updates" }}
        onNotificationClick={(click) => console.log(click.data)}
      />
    </header>
  );
}

userHash is the hex HMAC-SHA256 of the user id with your notifications signing secret, made on your server. See Identity verification.

When the signed-in user changes, the bell starts again for the new user; when the component unmounts, it is taken off the page. floating puts it in a corner of the page instead of where the component is.

useNotificationBell() gives open, close, toggle and refresh, for your own button or a keyboard shortcut (with hideButton).

All options, and what the bell does: docs.nordva.dev/guides/notifications.