NotificationListener

Headless SSE listener that connects to the notification stream. Fires a callback on each incoming notification. No visual output.

01 Usage

Basic

NotificationListener is a headless component with no visual output. It connects to an SSE stream and fires onNotification callbacks. Reconnects automatically with exponential backoff (1s–30s, max 5 attempts).

<script lang="ts">
  import { NotificationListener } from '@urbicon-ui/auth';

  // `store` is your own notification state — the listener only delivers.
  const store = { add: (notification: unknown) => console.log('New notification:', notification) };
</script>

<NotificationListener
  onNotification={(n) => store.add(n)}
  onReconnect={(attempt) => console.log('Reconnecting…', attempt)}
/>

02 Accessibility

It renders no DOM at all

The component is a lifecycle hook around an EventSource — there is no markup, so it adds nothing to the accessibility tree, cannot be focused, and cannot be reached by a screen reader. Placing it anywhere in the page is equally correct.

Announcing an arrival is the consumer’s job

Because it renders nothing, a notification arriving over the stream is completely silent for assistive tech. If arrival should be announced, route onNotification somewhere that speaks — a live region of your own, a toast, or the badge and centre this component is meant to feed.

Reconnection is silent by design

Dropped connections retry with exponential backoff and give up after maxReconnectAttempts, reporting through onError and onReconnect callbacks rather than any UI. If a stalled stream should be visible to the user, that surface is yours to build — silently missing notifications is the failure mode worth designing against.

03 API Reference

5 props

Prop	Type	Default	Description
`apiPath`	`string`	`'/api/notifications/stream'`	SSE stream endpoint. Read once when the component mounts — to switch endpoints (e.g. after a user change), unmount and remount the listener.
`maxReconnectAttempts`	`number`	`5`	Maximum reconnection attempts before giving up. Read once at mount.
`onError`	`(error: Event) => void`	—	Called when the SSE connection encounters an error.
`onNotification`	`( notification: import('../../../server/adapters/types.js').NotificationRecord ) => void`	—	Called when a new notification arrives via SSE.
`onReconnect`	`(attempt: number) => void`	—	Called when a reconnection attempt starts. Receives current attempt number.

04 Types

Local type definitions used by this component.

1 types

Only referenced

	Name	Kind	Category	Used by	Description
	NotificationListenerProps	interface	props	0	—

05 Installation

Import

import { NotificationListener } from '@urbicon-ui/auth';

llm.txt