NetworkIndicator

ComponentsConnectivity status

Drop-in React online/offline status banner

Live demo

Install

$ npm install @usefy/network-indicator

Quick start

NetworkIndicator.tsx

import { NetworkIndicator } from "@usefy/network-indicator";

function App() {
  return (
    <>
      <YourApp />
      {/* Mount once at the root — renders nothing while online */}
      <NetworkIndicator />
    </>
  );
}

API reference

`<NetworkIndicator />` Props

Prop	Type	Default	Description
`position`	`"top" \| "bottom"`	`"top"`	Which screen edge the fixed banner is pinned to.
`offlineMessage`	`ReactNode`	`"You're offline. Some features may not work."`	Content of the offline banner.
`onlineMessage`	`ReactNode`	`"Back online"`	Content of the reconnected confirmation.
`onlineDuration`	`number`	`3000`	How long (ms) the confirmation stays before auto-dismissing. `0` or negative disables it. Changing it mid-confirmation restarts the timer from zero with the new duration.
`render`	`(state: NetworkIndicatorState) => ReactNode`	—	Escape hatch: replaces the default banner entirely; called on every render (including steady-state online) with `{ online, reconnected }`.
`onStatusChange`	`(online: boolean) => void`	—	Called after each online/offline transition (never on mount).
`className`	`string`	—	Class applied to the default banner element.
`style`	`CSSProperties`	—	Inline styles merged over the defaults (yours win).

`NetworkIndicatorState`

interface NetworkIndicatorState {
  /** Current connectivity, from navigator.onLine (true on the server). */
  online: boolean;
  /** True during the "back online" confirmation window. */
  reconnected: boolean;
}

Other exports

Export	Description
`NetworkIndicatorProps`	Props type.
`NetworkIndicatorPosition`	`"top" \| "bottom"`.
`DEFAULT_OFFLINE_MESSAGE` / `DEFAULT_ONLINE_MESSAGE` / `DEFAULT_ONLINE_DURATION`	The defaults, for reuse in custom `render` UIs.

The default banner also exposes data-status="offline" | "reconnected" and data-position attributes for styling and testing.

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →