React Status Bar

A viewport can render inline or portal its output into a fixed shell node anywhere in the DOM. The producers stay where they are in the tree; only the rendered bar moves. (The bottom-of-screen global bar on every page is itself a portal.)

Portal into a window footer

This mock window owns a footer node with id="window-statusbar". The viewport targets it by selector — the producers live in this card, but their output appears down in the window chrome.

my-app.tsx

Editor content… the status bar below is a portal target, not where the producers are declared.

no window status

tsx

<div id="window-statusbar" />   {/* fixed shell node */}

<StatusBarViewport
  portalTarget="#window-statusbar"
  mode="stack"
/>

{/* declared here, rendered into the node above */}
<StatusBar priority={2}>● online</StatusBar>

Portals