Notification feed¶

UI · v0.1.0

A live notification feed with per-topic acknowledgement, for any server speaking the notification contract.


Install	`copit add @chanx-kit-ui/notification`
Or with shadcn	`npx shadcn add https://huynguyengl99.github.io/chanx-kit/r/notification.json`
Contract	`notification@1`
Works with	`notification`
Frameworks	`react` (the core is framework-free)
npm packages	`@chanx-js/client@^0.1.2`
Source	ui/notification

A live notification feed for any server speaking notification@1, such as the notification server kit. Acknowledging sends one notification_ack per topic.

copit add @chanx-kit-ui/notification

React¶

import { NotificationFeed, useNotifications } from '@/chanx-kit/notification/react';
import '@/chanx-kit/notification/notification.css';
import { notifications } from '@/generated';

const everyone = notifications.topics.broadcastNotificationTopic.with();

export function Inbox({ userId }: { userId: string }) {
  const mine = notifications.topics.userNotificationTopic.with({ user_id: userId });
  const { items, status, ackAll, dismiss } = useNotifications(notifications, {
    topics: [mine, everyone],
  });
  return <NotificationFeed items={items} status={status} onAckAll={ackAll} onDismiss={dismiss} />;
}

The channel and topics come from your generated client, so the kit works whatever you named them. Any topic whose messages fit the contract is accepted, including subclasses that send more; one that does not fit is a type error.

Without a framework¶

import { connectNotifications } from '@/chanx-kit/notification';

const inbox = connectNotifications(client, notifications, { topics: [everyone] });
inbox.feed.subscribe(() => render(inbox.feed.getSnapshot().items));
inbox.start();

createNotificationFeed() is the store alone: pass its on to any topics controller.

Styling¶

NotificationFeed renders class names and data-state / data-level attributes only. notification.css is the default look; skip it to style from scratch, or set the --chanx-* variables (--chanx-bg, --chanx-fg, --chanx-line, --chanx-muted, --chanx-accent, --chanx-radius, --chanx-info, --chanx-success, --chanx-warning, --chanx-error) at :root to theme every kit.