React Status Bar
A lightweight, portal-based status bar system for React. Any component can push UI into a shared bar; a viewport aggregates the entries and renders them — optionally portaled anywhere in the DOM.
$ bun add @mrmartineau/react-status-barSee it live
The three producers below all target one scope. The viewport sorts by priority (lower = more important) then recency and renders them. The bar pinned to the bottom of the window is another viewport — this page is pushing into it right now.
<StatusBarViewport mode="stack" separator="•" />
tsx
import { StatusBarProvider, StatusBarViewport, StatusBar } from "@mrmartineau/react-status-bar";
<StatusBarProvider>
<StatusBarViewport mode="stack" separator="•" />
{/* …anywhere deeper in the tree (lower priority = more important) … */}
<StatusBar priority={1}>Preview mode</StatusBar>
<StatusBar priority={2}>3 unresolved comments</StatusBar>
<StatusBar priority={3}>Autosaving…</StatusBar>
</StatusBarProvider>
// → "Preview mode • 3 unresolved comments • Autosaving…"Why React Status Bar
Side-effect API <StatusBar>…</StatusBar> registers content while mounted, removes it on unmount.
Surgical re-renders Per-scope subscriptions via useSyncExternalStore — only the affected viewport repaints.
Portaled output Mount the bar into a fixed shell node anywhere, or render inline.
Scopes Independent bars (global, editor, modal-42) from a single provider.
Accessible One always-mounted aria-live region so screen readers announce reliably.
SSR-safe Server snapshot is always empty → zero hydration mismatch.
Explore the examples