React Status Bar

One provider can drive any number of independent bars. Each viewport reads a single scope and re-renders only when that scope changes. Below: an editor bar and a notifications bar, fed by separate producers.

Two scopes, one provider

Editor bar — scope "editor"

no editor status

Notifications bar — scope "notifications"

all caught up ✨

Toggling the editor controls never re-renders the notifications viewport, and vice versa — the subscriptions are per-scope.

tsx

<StatusBarViewport scope="editor" mode="stack" />
<StatusBarViewport scope="notifications" mode="replace" />

<StatusBar scope="editor">Spellcheck enabled</StatusBar>
<StatusBar scope="notifications">🔔 2 unread notifications</StatusBar>

Scopes

Editor bar — scope "editor"

Notifications bar — scope "notifications"