Skip to Content

connectivity-js

Declarative, type-safe, offline-first solution for connectivity management for web apps.

Get Started

npm i @connectivity-js/react

See it in action

Toggle the network status and trigger actions to watch the offline queue in real time.

Live
Offline

Toggle network to see toast notifications

import { useConnectivity } from "@connectivity-js/react"
import { toast } from "sonner"

function NetworkStatus() {
  const { status } = useConnectivity()

  useEffect(() => {
    if (status === "offline") {
      toast.error("You are offline")
    } else if (status === "online") {
      toast.success("Back online!")
    }
  }, [status])

  return <div>Status: {status}</div>
}

Real-Time Connectivity Detection

Detect online/offline status with pluggable detectors — from the browser’s navigator.onLine to server heartbeat probes. Grace periods prevent flicker from brief network hiccups.

Declarative UI Branching

Switch between online and offline UI with a single <Connectivity> component. No manual state tracking, no if/else scattered across your codebase — just declare your fallback and let the library handle transitions.

Type-Safe Offline Action Queue

Actions executed while offline are automatically queued and replayed on reconnect. Define your actions with full TInput and TResult inference — the queue handles FIFO ordering, deduplication, and retry with configurable backoff.

Framework-Agnostic Core

The core engine has zero dependencies and works anywhere JavaScript runs. React adapter with hooks (useConnectivity, useAction, useQueue) included out of the box, with more framework adapters planned.