ConnectionStatus

Connection state display.

import { ConnectionStatus } from "@arlopass/react-ui";

Props

Prop	Type	Default	Description
`state`	`ClientState`	—	Connection state override. When omitted, reads from the nearest ArlopassProvider via useConnection. One of: "disconnected", "connecting", "connected", "degraded", "reconnecting", "failed".
`sessionId`	`string`	—	Session ID override. When omitted, reads from ArlopassProvider.
`children`	`ReactNode`	—	Custom content. Defaults to rendering the state string.

Uncontrolled usage

Inside a <ArlopassProvider>, the component reads connection state automatically via useConnection.

import { ArlopassProvider } from "@arlopass/react";
import { ConnectionStatus } from "@arlopass/react-ui";

function StatusBar() {
  return (
    <ArlopassProvider>
      <ConnectionStatus />
    </ArlopassProvider>
  );
}

Controlled usage

Pass the state prop to override auto-detection. Useful for storybooks, tests, or custom state management.

import { ConnectionStatus } from "@arlopass/react-ui";

function CustomStatus({ state }) {
  return (
    <ConnectionStatus state={state}>
      {state === "connected" ? "🟢 Online" : "🔴 Offline"}
    </ConnectionStatus>
  );
}

Data attributes

Prop	Type	Default	Description
`data-state`	`"disconnected" \| "connecting" \| "connected" \| "degraded" \| "reconnecting" \| "failed"`	—	Set on the root div. Mirrors the current connection state.

Styling

The component renders a plain <div> with a data-state attribute. Use CSS selectors to style each state:

/* Color-code connection states */
[data-state="connected"] {
  color: #22c55e;
}

[data-state="degraded"] {
  color: #eab308;
}

[data-state="disconnected"],
[data-state="failed"] {
  color: #ef4444;
}

[data-state="connecting"],
[data-state="reconnecting"] {
  color: #3b82f6;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}