Connectivity Live Banner Block for React

The preview shows the connected line, because the browser is online. Open your browser's developer tools, go to the Network panel and switch throttling to Offline (or use the device toolbar's offline option): the bar changes at once. Switch it back and the bar says "Back online" for four seconds. The same works in an automated test by setting the browser context offline.

The offline and online events on window, plus navigator.onLine once after the first render, so a page opened while offline starts on the offline line. The listeners are removed when the block unmounts. The server always renders the connected line, and the browser corrects it after the first render, so the two never disagree.

It shows "Checking your connection…" for about a second, then reads navigator.onLine once and settles on Back online or back on offline. That flag only says whether the device has a network, not whether your server answers. For a real check, replace the timer in the checking effect with a request to a small health endpoint and set the result from its answer.

A status line that is in the page from the start, visually hidden, gets its text when the state changes: "You're offline. Changes are saved on this device." and "Back online. Your changes are synced." Nothing is announced at load, and the Connected line is silent when it returns after Back online. The visible lines that aren't current are hidden from assistive technology and can't take focus.

Each line sits in the same grid cell and the lines that aren't showing are invisible, so the cell is as tall as the tallest. On a phone the longer offline line wraps to two lines, and the bar keeps that height in every state, so the page below never shifts.

Yes. The tint is bg-muted/50 on the section only while the bar is offline, fading in and out with a CSS transition (none with reduced motion). The dots use the success and warning tokens; the text stays in the foreground colours.