@playstack/notifications-react

@playstack/notifications-react supplies headless React state for an authenticated in-app inbox. It does not install authentication, routes, fetch globals, realtime connections, or visual styling.

Install

After confirming preview access, install the package at your application's shared Playstack version:

npm install --save-exact @playstack/notifications-react@0.1.0-beta.1

Check the peer requirements below before choosing a runtime or provider.

Compose an inbox

'use client'

import {
  createNotificationsInboxCache,
  PlaystackNotificationsProvider,
  useNotificationsInbox,
} from '@playstack/notifications-react'

const cache = createNotificationsInboxCache()

function Inbox() {
  const inbox = useNotificationsInbox()

  return inbox.notifications.map((notification) => (
    <button
      key={notification.id}
      onClick={() => inbox.markRead(notification.id)}
    >
      {notification.title}
    </button>
  ))
}

export function InboxBoundary() {
  return (
    <PlaystackNotificationsProvider client={inboxClient} cache={cache}>
      <Inbox />
    </PlaystackNotificationsProvider>
  )
}

The package root is a Client Component entry point and can be mounted below a Next.js App Router Server Component boundary.

Provider configuration

useNotificationsInbox() exposes notifications, unread count, pagination state, refresh, loadMore, markRead, and archive. Mutations update optimistically and roll back on rejection; pagination de-duplicates rows by ID. NotificationsInbox offers the same state as a render-prop component.

client.client preserves the underlying HTTP or query client as the provider escape hatch.

API entry points and requirements

Reference snapshot: @playstack/notifications-react@0.1.0-beta.1. Import only the entry point your runtime needs. Paths below are relative to the installed package; use Go to Definition in your editor to inspect exact parameters, return types and overloads. Do not import the declaration-file paths directly.

Node.js engine requirement: >=20. This is not a claim that every entry point works in browsers or Workers.

Peer dependencies

Keep existing framework versions that satisfy these ranges. Install optional peers only when using the corresponding adapter. The package manager resolves ordinary dependencies separately.

For a complete first program, start with Getting started. For API lookup and partial-example conventions, see Reading the reference. Provider failures, lifecycle requirements and application responsibilities remain described in the guide above; types alone do not establish production safety.